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 可以让图标反色。