前言
fontawesome图标提供丰富的矢量―通过CSS可以任意控制所有图标的大小 ，颜色，阴影。 今天就来介绍下fontawesome图标的安装方法及使用方法。
Font Awesome 特性
479个图标：只需一种字体，同时拥有多个图标 无需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> 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>
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