CSS3在html页面中使用Font Awesome字体图标的方法

1，最简单的样例

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

fa-camera-retro

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

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

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x

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

3，固定宽度图标

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

   
   
   
   


   

4，列表图标

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

 
• List icons

 
• can be used

 
• as bullets

 
• in lists

5，有边框且漂浮的图标

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

...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning— So we beat on, boats against the
current, borne back ceaselessly into the past.

6，图标旋转动画

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

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

7，旋转、翻转图标

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

normal

fa-rotate-90

fa-rotate-180

fa-rotate-270

fa-flip-horizontal

fa-flip-vertical

8，叠加图标

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

 
 

fa-twitter on fa-square-o


 
 

fa-flag on fa-circle


 
 

fa-terminal on fa-square