使用Font Awesome

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

1.  rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

只需要这两步你就可以在主题中调用fontawesome图标了，对于使用烽烟主题的朋友可以忽略这部。

使用

引入fontawesome以后，你可以把标签用在各个地方！

1.例如基本图标：复制以下代码到你的html里

1.  class="fa fa-camera-retro"> fa-camera-retro

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

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

1.  class="fa fa-camera-retro fa-lg"> fa-lg
2.  class="fa fa-camera-retro fa-2x"> fa-2x
3.  class="fa fa-camera-retro fa-3x"> fa-3x
4.  class="fa fa-camera-retro fa-4x"> fa-4x
5.  class="fa fa-camera-retro fa-5x"> fa-5x

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

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

1.  class="list-group">  class="list-group-item" href="#"> class="fa fa-home fa-fw">  Home  class="list-group-item" href="#"> class="fa fa-book fa-fw">  Library  class="list-group-item" href="#"> class="fa fa-pencil fa-fw">  Applications  class="list-group-item" href="#"> class="fa fa-cog fa-fw">  Settings 

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

1.  class="fa-ul"> 
2.  class="fa-li fa fa-check-square">List icons
 
3.  class="fa-li fa fa-check-square">can be used
 
4.  class="fa-li fa fa-spinner fa-spin">as bullets
 
5.  class="fa-li fa fa-square">in lists
 

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

1.  class="fa fa-quote-left fa-3x pull-left fa-border">...tomorrow we will run faster, stretch out our arms farther...
2. And then one fine morning— So we beat on, boats against the
3. current, borne back ceaselessly into the past.

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

1.  class="fa fa-spinner fa-spin">  class="fa fa-circle-o-notch fa-spin">  class="fa fa-refresh fa-spin">  class="fa fa-cog fa-spin">

只支持IE10+7.翻转图标

1.  class="fa fa-shield"> normal
     class="fa fa-shield fa-rotate-90"> fa-rotate-90
     class="fa fa-shield fa-rotate-180"> fa-rotate-180
     class="fa fa-shield fa-rotate-270"> fa-rotate-270
     class="fa fa-shield fa-flip-horizontal"> fa-flip-horizontal
     class="fa fa-shield fa-flip-vertical"> icon-flip-vertical

8.叠加图标

1.  class="fa-stack fa-lg">  class="fa fa-square-o fa-stack-2x">  class="fa fa-twitter fa-stack-1x"> fa-twitter on fa-square-o
     class="fa-stack fa-lg">  class="fa fa-circle fa-stack-2x">  class="fa fa-flag fa-stack-1x fa-inverse"> fa-flag on fa-circle
     class="fa-stack fa-lg">  class="fa fa-square fa-stack-2x">  class="fa fa-terminal fa-stack-1x fa-inverse"> fa-terminal on fa-square
     class="fa-stack fa-lg">  class="fa fa-camera fa-stack-1x">  class="fa fa-ban fa-stack-2x text-danger"> fa-ban on fa-camera