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

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

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

1.基本图标：

<i class="fa fa-camera-retro"></i> fa-camera-retro

效果图如下：

one.jpg

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

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

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

效果图如下：

two.jpg

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

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

<div class="list-group"> 
  <a class="list-group-item" href="#">
    <i class="fa fa-home fa-fw"></i>  Home
  </a> 
  <a class="list-group-item" href="#">
    <i class="fa fa-book fa-fw"></i>  Library
  </a> 
  <a class="list-group-item" href="#">
    <i class="fa fa-pencil fa-fw"></i>  Applications
  </a> 
  <a class="list-group-item" href="#">
    <i class="fa fa-cog fa-fw"></i>  Settings
  </a> 
</div>

效果图如下：

three.jpg

4.列表图标：使用 fa-ul and 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>

效果图如下：

four.jpg

5.有边框 & 漂浮 图标：fa-border 和 pull-right 或者 pull-left 组合使用

<i class="fa fa-quote-left fa-3x pull-left fa-border"></i>
...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组合

<i class="fa fa-spinner fa-spin"></i> 
<i class="fa fa-circle-o-notch fa-spin"></i> 
<i class="fa fa-refresh fa-spin"></i> 
<i class="fa fa-cog fa-spin"></i>

效果图如下：

five.jpg

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

<i class="fa fa-shield"></i> normal<br> 
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br> 
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br> 
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br> 
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br> 
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical

效果图如下：

six.jpg

8.叠加图标

<span class="fa-stack fa-lg"> 
  <i class="fa fa-square-o fa-stack-2x"></i> 
  <i class="fa fa-twitter fa-stack-1x"></i> 
</span>fa-twitter on fa-square-o<br> 
<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>fa-flag on fa-circle<br> 
<span class="fa-stack fa-lg"> 
  <i class="fa fa-square fa-stack-2x"></i> 
  <i class="fa fa-terminal fa-stack-1x fa-inverse"></i> 
</span>fa-terminal on fa-square<br> 
<span class="fa-stack fa-lg"> 
  <i class="fa fa-camera fa-stack-1x"></i> 
  <i class="fa fa-ban fa-stack-2x text-danger"></i> 
</span>fa-ban on fa-camera

效果图如下：

seven.jpg