前言
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.（具体路径是你的情况而定）
<linkrel="stylesheet"href="path/to/font-awesome/css/font-awesome.min.css">
只需要这两步你就可以在主题中调用fontawesome图标了，对于使用烽烟主题的朋友可以忽略这部。
使用
引入fontawesome以后，你可以把<i>标签用在各个地方！
1.例如基本图标：复制以下代码到你的html里
<iclass="fafa-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 这些类等比缩放图标大小.
<iclass="fafa-camera-retrofa-lg"></i>fa-lg<iclass="fafa-camera-retrofa-2x"></i>fa-2x<iclass="fafa-camera-retrofa-3x"></i>fa-3x<iclass="fafa-camera-retrofa-4x"></i>fa-4x<iclass="fafa-camera-retrofa-5x"></i>fa-5x
如果发现图标上下有被隐藏的情况，你可以通过适当增加 line-height来解决.
3.固定宽度图标：使用 fa-fw可以固定图标宽度
<divclass="list-group"><aclass="list-group-item"href="#"><iclass="fafa-homefa-fw"></i> Home</a><aclass="list-group-item"href="#"><iclass="fafa-bookfa-fw"></i> Library</a><aclass="list-group-item"href="#"><iclass="fafa-pencilfa-fw"></i> Applications</a><aclass="list-group-item"href="#"><iclass="fafa-cogfa-fw"></i> Settings</a></div>
4.列表图标：使用 fa-ul and fa-li 如下
<ulclass="fa-ul"><li><iclass="fa-lifafa-check-square"></i>Listicons</li><li><iclass="fa-lifafa-check-square"></i>canbeused</li><li><iclass="fa-lifafa-spinnerfa-spin"></i>asbullets</li><li><iclass="fa-lifafa-square"></i>inlists</li></ul>
5.有边框 & 漂浮 图标：fa-border 和 pull-right 或者 pull-left 组合使用
<iclass="fafa-quote-leftfa-3xpull-leftfa-border"></i>...tomorrowwewillrunfaster,stretchoutourarmsfarther...Andthenonefinemorning—Sowebeaton,boatsagainstthecurrent,bornebackceaselesslyintothepast.
6.旋转图标：fa-spin 和 fa-spinner, fa-refresh, fa-cog组合
<iclass="fafa-spinnerfa-spin"></i><iclass="fafa-circle-o-notchfa-spin"></i><iclass="fafa-refreshfa-spin"></i><iclass="fafa-cogfa-spin"></i>
只支持IE10+7.翻转图标
<iclass="fafa-shield"></i>normal<br><iclass="fafa-shieldfa-rotate-90"></i>fa-rotate-90<br><iclass="fafa-shieldfa-rotate-180"></i>fa-rotate-180<br><iclass="fafa-shieldfa-rotate-270"></i>fa-rotate-270<br><iclass="fafa-shieldfa-flip-horizontal"></i>fa-flip-horizontal<br><iclass="fafa-shieldfa-flip-vertical"></i>icon-flip-vertical
8.叠加图标
<spanclass="fa-stackfa-lg"><iclass="fafa-square-ofa-stack-2x"></i><iclass="fafa-twitterfa-stack-1x"></i></span>fa-twitteronfa-square-o<br><spanclass="fa-stackfa-lg"><iclass="fafa-circlefa-stack-2x"></i><iclass="fafa-flagfa-stack-1xfa-inverse"></i></span>fa-flagonfa-circle<br><spanclass="fa-stackfa-lg"><iclass="fafa-squarefa-stack-2x"></i><iclass="fafa-terminalfa-stack-1xfa-inverse"></i></span>fa-terminalonfa-square<br><spanclass="fa-stackfa-lg"><iclass="fafa-camerafa-stack-1x"></i><iclass="fafa-banfa-stack-2xtext-danger"></i></span>fa-banonfa-camera
