Font Awesome 4.7.0图标提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ，颜色，阴影。 今天烽烟就来介绍下fontawesome图标的安装方法及使用方法。

Font Awesome 特性

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


安装
1.下载Font Awesome最新安装包。 


2.在 <head> 标签 里, 引入 font-awesome.min.css（具体路径是你的情况而定） 

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
只需要这两步你就可以在主题中调用fontawesome图标了

使用
引入fontawesome以后，你可以把<i>标签用在各个地方！
1.例如基本图标：复制以下代码到你的html里
<i class="fa fa-camera-retro"></i> fa-camera-retro
你可以通过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
如果发现图标上下有被隐藏的情况，你可以通过适当增加 line-height来解决.


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

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


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>


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

只支持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

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