FontAwesome
info
入门
安装FontAwesome只需简单的几行代码，就可以和bootstrap完美兼容
- 下载Font Awesome最新安装包.
-
在
<head>标签 里, 引入 font-awesome.min.css.<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
前言: 众所周知Font Awesome非常漂亮且好用，但一直以来对IE的支持都不是很理想。之前Font Awesome官方出过对Font Awesome 3.2.1的IE7兼容性解决方案，但其最新版本4.2.0至今未有任何动作。 ThinkCMF秉承开放至精神，集己所力推出Font Awesome 4.2.0兼容性解决方案,目前已完美兼容至IE7。
使用交流请至Font Awesome兼容性处理
Font Awesome官方网站Font Awesome
-
在
<head>标签 里, 引入 font-awesome.min.css.<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome-ie7.min.css">
例子
引入fontawesome以后，你可以把<i>标签用在各个地方！
基本图标
fa-camera-retro
复制以下代码到你的html里
<i class="fa fa-camera-retro"></i> fa-camera-retro
- 你可以通过css控制图标的font-size,color,阴影等
Larger Icons
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
你可以使用 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来解决.
固定宽度图标
使用 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>
列表图标
- List icons
- can be used
- as bullets
- in lists
使用 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>
有边框 & 漂浮 图标
…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.
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.
旋转图标
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+
翻转图标
normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical
<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
叠加图标
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera
<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