标签：Font Awesome

Font Awesome字体图标的特色
✓ 一种字体，包含605个图标（截至4.5.0版本）；
✓ 纯 css 控制，能够轻松定义图标的颜色、大小、阴影以及任何 CSS 能够实现的效果；
✓ 无限缩放，矢量图标在任何尺寸下都一模一样；
✓ 免费使用，包括商业和非商业项目；
✓ 支持 Internet Explorer 7 浏览器；
✓ 能够在 Retina 屏幕完美呈现；
✓ 简单，易用；
✓ 对设计师友好，设计师能够轻松使用；
✓ 和其它图标字体不同，兼容屏幕阅读器；

Font Awesome的配置
（1）首先将整个字体库文件夹 font-awesome 放到工程项目中。
（2）在html页面的头部把 font-awesome.min.css 引进来。

 

Font Awesome的使用样例
在页面中的任何地方都可以使用i标签来使用Font Awesome字体图标。

1、最简单的样例

通过在class中使用 fa 前缀以及图标名字，可以显示出相应的图标（内联样式）

 

 

2、相对于内容大小，放大图标尺寸

使用fa-lg, fa-2x, fa-3x, fa-4x, fa-5x 样式可以让图标相对于内容，尺寸增大33%，变成2倍，3倍，4倍，5倍。

 

 

（注意：如果发现图标上下有被隐藏的情况，你可以通过适当增加 line-height 来解决）

3、固定宽度图标

使用 fa-fw 可以固定图标宽度

 

4、列表图标

使用 fa-ul 和 fa-li 可以很方便地替换list列表默认图标。

<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>

5、有边框且漂浮的图标

使用 fa-border 与 fa-pull-right 或者 fa-pull-left 组合使用，可以很方便地实现引用或文章图标。

 

 

6、图标旋转动画

使用 fa-spin 可以让图标匀速旋转，使用 fa-pulse 可以让图标只按8个角度旋转。

 

 

（注意：如果是IE浏览器，只支持 IE10 以及以上版本的IE）

7、旋转、翻转图标

使用 fa-rotate-* 和 fa-flip-* 可以分别实现图标的旋转和翻转。

 

8、叠加图标

要叠加多个图标，使用 fa-stack 设置容器。fa-stack-1x 表示正常大小的图标，fa-stack-2x 表示更大的图标。 fa-inverse 可以让图标反色。