前言
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.（具体路径是你的情况而定）
- rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
只需要这两步你就可以在主题中调用fontawesome图标了，对于使用烽烟主题的朋友可以忽略这部。
使用
引入fontawesome以后，你可以把标签用在各个地方！
1.例如基本图标：复制以下代码到你的html里
- 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 这些类等比缩放图标大小.
- class="fa fa-camera-retro fa-lg"> fa-lg
- class="fa fa-camera-retro fa-2x"> fa-2x
- class="fa fa-camera-retro fa-3x"> fa-3x
- class="fa fa-camera-retro fa-4x"> fa-4x
- class="fa fa-camera-retro fa-5x"> fa-5x
如果发现图标上下有被隐藏的情况，你可以通过适当增加 line-height来解决.
3.固定宽度图标：使用 fa-fw可以固定图标宽度
- 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 如下
- class="fa-ul">
- class="fa-li fa fa-check-square">List icons
- class="fa-li fa fa-check-square">can be used
- class="fa-li fa fa-spinner fa-spin">as bullets
- class="fa-li fa fa-square">in lists
5.有边框 & 漂浮 图标：fa-border 和 pull-right 或者 pull-left 组合使用
- class="fa fa-quote-left fa-3x pull-left fa-border">...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组合
- 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.翻转图标
- 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.叠加图标
- 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
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
