作为web开发者，难免要经常要用到些小图标，给自己web增添几分活力和多样性。像这些：

　　而Font Awesome刚好为我们提供了这些。到目前为止，Font Awesome提供了有500多个可缩放的的矢量图标，并且可以使用css所提供的所有特性对这些图标进行更改，包括：大小、颜色、阴影或者其他任何支持的效果。这些图标基本涵盖了web开发者的基本需求，并且Font Awesome还在不断维护更新，提供新的图标，以供开发者使用。

　　在此，主要介绍一下Font Awesome图标字体的基本使用。

　　到Font Awesome上去下载它的图标字体，我们这里只是用默认css。将font-awesome.min.css引用到自己的页面。

<head>

    <meta charset="utf-8">

    <link rel="stylesheet" href="./css/font-awesome.min.css">

</head>

　　然后就可以使用Font Awesome为我们提供的500多个图标字体了。

　　首先，实现一个经常表示“首页”的小房子的图标。

<!doctype html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <link rel="stylesheet" href="./css/font-awesome.min.css">

</head>

<body style="background-color:#DBDBDB">

    <i class="fa fa-home"></i> Home

</body>

</html>

　　页面效果：

　　当然图标大小可能不能达到你的要求，那么你可以自己定义大小，或者用Font Awesome提供的几个大小样式类。fa-lg, fa-2x, fa-3x, fa-4x, fa-5x。

    <i class="fa fa-home"></i> 原始大小<br>

    <i class="fa fa-home fa-4x"></i> fa-4x<br>

    <i class="fa fa-home" style="font-size:30px;"></i> 自定义大小-30px

　　页面效果：

　　当然，颜色也是你随心所欲可以设置的。

    <i class="fa fa-home fa-2x"></i> 原始色<br>

    <i class="fa fa-home fa-2x" style="color:#008B00"></i> 草绿色

　　页面效果：

　　也可以将图标旋转下。

    <i class="fa fa-home fa-2x"></i> 原始<br>

    <i class="fa fa-home fa-2x fa-rotate-90"></i> fa-rotate-90<br>

    <i class="fa fa-home fa-2x fa-rotate-180"></i> fa-rotate-180<br>

    <i class="fa fa-home fa-2x fa-rotate-270"></i> fa-rotate-270<br>

    <i class="fa fa-home fa-2x fa-flip-horizontal"></i> fa-flip-horizontal<br>

    <i class="fa fa-home fa-2x fa-flip-vertical"></i> fa-flip-vertical<br>

　　页面效果：

　　font awesome提供了一些类，用于设置图标的固定宽度（fa-fw），用于列表模式（fa-ul 和 fa-li），边框与对齐（fa-ul 和 fa-li）以及图标的组合使用，比如空白的边框中添加其他图标。详细点我。

　　这里我们重点介绍下图标的动画使用。font awesome提供了fa-spin和fa-pulse两个类实现图标动画效果，主要适用于适合旋转的图标。

    <i class="fa fa-spinner fa-2x fa-spin"></i>

    <i class="fa fa-circle-o-notch fa-2x fa-spin"></i>

    <i class="fa fa-refresh fa-2x fa-spin"></i>

    <i class="fa fa-cog fa-2x fa-spin"></i>

    <i class="fa fa-spinner fa-2x fa-pulse"></i>

　　页面效果：

　　当然，我们可以自己定义一些样式用于控制图标的动画效果。这里我们引入自己定义的css样式my.css。

<!doctype html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <link rel="stylesheet" href="./css/font-awesome.min.css">

    <link rel="stylesheet" href="./css/my.css">

</head>

<body style="background-color:#DBDBDB">

    <div style="padding-left:100px; padding-top:200px;">  &nbsp;

        <i class="fa fa-envelope fa-2x icon-animated-vertical"></i> &nbsp;

        <i class="fa fa-hand-o-right fa-2x icon-animated-hand-pointer"></i> &nbsp;

        <i class="fa fa-bell fa-2x icon-animated-bell"></i> &nbsp;

        <i class="fa fa-wrench fa-2x icon-animated-wrench"></i>

    </div>

</body>

</html>

　　网页效果：

　　这里抛砖引玉，大家可以根据自己的需要，来定义自己的css。让自己的web开发更炫酷。

　　文中的自定义样式my.css可以点这里下载。以上。

　　

Font Awesome图标字体应用及相关的更多相关文章

  1. Font Awesome:图标字体，完全CSS控制

    Font Awesome是一种web font,它包含了几乎所有常用的图标,比如Twitter.facebook等等.用户可以自定义这些图标字体,包括大小.颜色.阴影效果以及其它可以通过CSS控制的属 ...

  2. font awesome (图标字体库)

    Font Awesome fa是什么? 图标字体库和CSS框架 怎么用? <link rel="stylesheet" href="https://cdn.boot ...

  3. Font Awesome图标字体库（2015年05月25日）

    Font Awesome是一款非常棒的字体图标工具,给个地址,具体的自已慢慢去体会,只能帮你到这儿了...... http://fortawesome.github.io/Font-Awesome/ ...

  4. Font Awesome图标字体

    1.unicode unicode是字体在网页端最原始的应用方式,特点是: 兼容性最好,支持ie6+,及所有现代浏览器. 支持按字体的方式去动态调整图标大小,颜色等等. 但是因为是字体,所以不支持多色 ...

  5. CSS网页使用Font Awesome图标字体时，css定义 content 属性

    原文地址: http://blog.csdn.net/laurel_y/article/details/70842157

  6. 01_MUI之Boilerplate中：HTML5示例，动态组件，自定义字体示例，自定义字体示例，图标字体示例

     1安装HBuilder5.0.0,安装后的界面截图如下: 2 按照https://www.muicss.com/docs/v1/css-js/boilerplate-html中的说明,创建上图的 ...

  7. IconMoon图标字体制作

    官网:https://icomoon.io/ 点击右上角“IconMoon APP” 点击左上角“import Icons”按钮 选中小图标 - 选择右下角“Generate Font”生成图标字体 ...

  8. 01_MUI之Boilerplate中：HTML5演示样例，动态组件，自己定义字体演示样例，自己定义字体演示样例，图标字体演示样例

     1安装HBuilder5.0.0,安装后的界面截图例如以下: 2 依照https://www.muicss.com/docs/v1/css-js/boilerplate-html中的说明,创建上 ...

  9. 如何应用Font Awesome矢量字体图标

    Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库.这套图标字体集几乎囊括了网页中可能用到的所有图标,除了包括 Twitter Boostrap 的默认图标外, ...

随机推荐

  1. linux登录后出现-bash-4.1$

    linux登录后有时候会出现-bash-4.1$ 造成这样的原因: 与这个用户有关环境变量没了,有关的文件被删除.也就是用户的家目录下面 .bash_profile .bashrc 被删除. 解决办法 ...

  2. 疑似网络抖动引起的RAC单节点宕机

  3. 从0开始学FreeRTOS-(列表与列表项)-3

    # FreeRTOS列表&列表项的源码解读     第一次看列表与列表项的时候,感觉很像是链表,虽然我自己的链表也不太会,但是就是感觉很像. 在`FreeRTOS`中,列表与列表项使用得非常多 ...

  4. QR 码详解（下）

    快速响应矩阵码(下) 书接上回,继续下半场. 纠错码 QR 码采用纠错算法生成一系列纠错码字,添加在数据码字序列之后,使得符号可以在遇到损坏时可以恢复.这就是为什么二维码即使有残缺也可以扫出来.没有残 ...

  5. springboot 自定义LocaleResolver切换语言

    springboot 自定义LocaleResolver切换语言 我们在做项目的时候,往往有很多项目需要根据用户的需要来切换不同的语言,使用国际化就可以轻松解决. 我们可以自定义springboor中 ...

  6. Zabbix安装与简单配置

    目录 0. 前言 1. 安装 1.1 准备安装环境 1.1.1 下载安装包 1.1.2 修改文件配置 1.2 开始安装 2. 实验环境 2.1 简易拓扑图 2.2 基本配置 3. 配置 0. 前言 不 ...

  7. windows上gedit 安装

    1. 用浏览器打开https://wiki.gnome.org/Apps/Gedit 下载并安装 gedit 文本编辑器.这个操作无需管理员权限. 2. 把 gedit 放到桌面或者快速启动栏,这样你 ...

  8. VMware15.5版本下安装Windows_Server_2008_R2

    一.新建虚拟机 第一步:打开VMware15.5虚拟机,在欢迎界面点击新建虚拟机: 第二步:选择典型(推荐)选项-->适用于新手,单击下一步: 第三步:选定最后一项稍后安装操作系统,单击下一步: ...

  9. Ubuntu Qt5.13 无法输入中文和中文显示乱码问题

    无法输入中文: sudo apt-get install libfcitx-qt5-dev cd /usr/lib/x86_64-linux-gnu/qt5/plugins/platforminput ...

  10. Unity3D 通过JSON查询天气

    一.天气查询API 获取天气信息,首先要找到提供天气数据的接口,我使用的是高德地图免费为我们提供的,网址为 https://lbs.amap.com/api/webservice/guide/api/ ...