Font Awesome应用详解
1.1概述
FontAwesome提供可缩放的矢量图标，可以使用CSS所提供的所有特性对其进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。
FontAwesome的缺点是：对IE6等浏览器兼容性不是很好，不过最新版本(4.2.0以后的版本)和IE7完美兼容。
1.2本地使用
1.2.1推荐地址
下载并且提供查询功能的链接：http://fontawesome.io/icons/
1.2.2引用
1、下载完毕并解压后文件包括以下几个文件夹：
css—字体的引入,图标基础样式,大小等。
fonts—css需要引用字体文件夹,本地用户需要安装内部的fontawesome-webfont.ttf(CSS引入字体)。
less—各种参数自定义的less文件,用来自定义Fontawesome。
sass—各种参数自定义的sass文件,用来自定义Fontawesome。
sass和less都是CSS预处理器。
2、把css文件夹和fonts文件夹复制到项目根目录下并在html文件中引文font-awesome.min.css文件即可。
注意：生产环境建议用压缩版本,非压缩版本建议学习使用。
1.2.3图标引用及设置
1、图标的引用
FontAwesome是为使用内联元素而设计的，通常使用<i>标签，因为其更简洁。但实际上使用<span>标签才更加语义化。引用方法则是使用CSS类，类名是前缀fa，再加上图标名称。
例：
<i class="fa fa-weixin"></i>
2、图标设置
(一)规格参数
使用fa-lg(比常规图标大33%),fa-2x,fa-3x,fa-4x,orfa-5x(2X~5x都是常规图标大小的倍数)这些类等比缩放图标大小。
例：
<i class="fa fa-weixin fa-lg"></i> <i class="fa fa-weixin fa-2x"></i> <i class="fa fa-weixin fa-3x"></i> <i class="fa fa-weixin fa-4x"></i> <i class="fa fa-weixin fa-5x"></i>
(二)固定图标大小
使用fa-fw类给图标设置为一个固定宽度。主要用于不同宽度图标无法对齐的情况，尤其在列表或导航时起到重要的作用。
(三)图标定位
使用pull-right(定位在右边)和pull-left(定位在左边)类可以控制图标位置,是文字环绕。
例：
<i class="fa fa-tag pull-right"><i> <i class="fa fa-tag pull-left"><i>
(四)为图标添加边框
使用fa-border类可以给图标加一个边框。
例：
<i class="fa fa-search fa-border"><i>
(五)旋转图标
使用fa-rotate-旋转度数类来控制图标的旋转度数，使用fa-flip-参数(horizontal/vertical)类来控制图标水平和垂直。
例：
<i class="fa fa-hand-o-up"></i> <i class="fa fa-hand-o-up fa-rotate-90 "> <i class="fa fa-hand-o-up fa-flip-horizontal "> <i class="fa fa-hand-o-up fa-flip-vertical "></i>
(六)图标动画
使用fa-spin和fa-pulse类给图标设置一个旋转动画。spin的速度是linear(匀速),一圈2s，pulse分为八步,一圈时间1s。
例：
<i class="fa fa-arrow-right fa-spin"></i> <i class="fa fa-spinner fa-pulse"></i> <i class="fa fa-spinner fa-spin fa-pulse"></i>
(七)列表图标
使用fa-ul和fa-li类便可以简单地将无序列表的默认符号替换掉。
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>can be used</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
<li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>(八)组合图标
使用fa-stack类作为父级盒子组合子元素生成的对象，可以使用规格参数。使用fa-stack-2x类作为背景的栈,要大于显示图形的栈，使用fa-stack-1x类作为背景栈内部的内容,要小于背景栈。另外使用fa-inverse类来反转图标的颜色,生成可见图标组。
例1：
<span class="fa-stack fa-3x">
<i class="fa fa-stack-1x fa-chain"></i>
<i class="fa fa-stack-2x fa-circle-o "></i>
</span>例2：
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>