Font Awesome图标的使用方法

fontawesome图标提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ，颜色，阴影。

Font Awesome特性
479个图标：只需一种字体，同时拥有多个图标
无需JavaScript：Font Awesome不依赖于JS，同时中文版Font Awesome提供了IE7+以上兼容性解决方案
可无限放大缩小，使用和普通字体一样自由便捷,可任意缩放
完全免费：完全免费，可以用于商业用途
CSS可控性：通过CSS可以任意控制所有图标的大小 ，颜色，阴影。
完全兼容视网膜屏：由于fontawesome是矢量字体，可以完全兼容视网膜屏
良好兼容性：能和Bootstrap等常用UI框架一起使用，奥森（Font Awesome中文）兼容IE7+
桌面应用：可以用于桌面应用中
兼容屏幕阅读器：不像其它字体那样， 它可以兼容屏幕阅读器

引入fontawesome以后，你可以把标签用在各个地方！(复制以下代码到你的html里)

1.基本图标：

 fa-camera-retro

效果图如下：

one.jpg

你可以通过css控制图标的font-size,color,阴影等

2.Larger Icons：你可以使用 fa-lg (增加33%), fa-2x, fa-3x, fa-4x, or fa-5x 这些类等比缩放图标大小.

 fa-lg
 fa-2x
 fa-3x
 fa-4x
 fa-5x

效果图如下：

two.jpg

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

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

 
  
      Home
   
  
      Library
   
  
      Applications
   
  
      Settings
   

效果图如下：

three.jpg

4.列表图标：使用 fa-ul and fa-li 如下

 
  

    List icons
  
 
  

    can be used
  
 
  

    as bullets
  
 
  

    in lists
  
 

效果图如下：

four.jpg

5.有边框 & 漂浮 图标：fa-border 和 pull-right 或者 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.

效果图如下：

five.jpg

6.旋转图标：fa-spin 和 fa-spinner, fa-refresh, fa-cog组合

效果图如下：

five.jpg

以下代码只支持IE10+7.翻转图标

 normal
 
 fa-rotate-90
 
 fa-rotate-180
 
 fa-rotate-270
 
 fa-flip-horizontal
 
 icon-flip-vertical

效果图如下：

six.jpg

8.叠加图标

 
   
   
fa-twitter on fa-square-o
 
 
   
   
fa-flag on fa-circle
 
 
   
   
fa-terminal on fa-square
 
 
   
   
fa-ban on fa-camera

效果图如下：

seven.jpg