Font Awesome字体图标的特色
✓ 一种字体，包含605个图标（截至4.5.0版本）；
✓ 纯 css 控制，能够轻松定义图标的颜色、大小、阴影以及任何 CSS 能够实现的效果；
✓ 无限缩放，矢量图标在任何尺寸下都一模一样；
✓ 免费使用，包括商业和非商业项目；
✓ 支持 Internet Explorer 7 浏览器；
✓ 能够在 Retina 屏幕完美呈现；
✓ 简单，易用；
✓ 对设计师友好，设计师能够轻松使用；
✓ 和其它图标字体不同，兼容屏幕阅读器；
Font Awesome的配置
（1）首先将整个字体库文件夹 font-awesome 放到工程项目中。
（2）在html页面的头部把 font-awesome.min.css 引进来。
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
Font Awesome的使用样例
在页面中的任何地方都可以使用i标签来使用Font Awesome字体图标。
1、最简单的样例
通过在class中使用 fa 前缀以及图标名字，可以显示出相应的图标（内联样式）
<i class="fa fa-camera-retro"></i> fa-camera-retro
2、相对于内容大小，放大图标尺寸
使用fa-lg, fa-2x, fa-3x, fa-4x, fa-5x 样式可以让图标相对于内容，尺寸增大33%，变成2倍，3倍，4倍，5倍。
<i class="fa fa-camera-retro fa-lg"></i> fa-lg <br> <i class="fa fa-camera-retro fa-2x"></i> fa-2x <br> <i class="fa fa-camera-retro fa-3x"></i> fa-3x <br> <i class="fa fa-camera-retro fa-4x"></i> fa-4x <br> <i class="fa fa-camera-retro fa-5x"></i> fa-5x <br>
（注意：如果发现图标上下有被隐藏的情况，你可以通过适当增加 line-height 来解决）
3、固定宽度图标
使用 fa-fw 可以固定图标宽度
<!doctype html>
<html lang="en">
<head>
<title>111cn.net</title>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<style>
.list-group {
margin-bottom: 20px;
padding-left: 0;
}
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #ffffff;
border: 1px solid #dddddd;
}
.list-group-item:first-child {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
.list-group-item:last-child {
margin-bottom: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
a.list-group-item {
text-decoration: none;
color: #555555;
}
a.list-group-item:hover,
a.list-group-item:focus {
text-decoration: none;
color: #555555;
background-color: #f5f5f5;
}
</style>
</head>
<body>
<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>
</body>
</html>
4、列表图标
使用 fa-ul 和 fa-li 可以很方便地替换list列表默认图标。
<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 与 fa-pull-right 或者 fa-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-pulse 可以让图标只按8个角度旋转。
<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> <i class="fa fa-spinner fa-pulse"></i>
（注意：如果是IE浏览器，只支持 IE10 以及以上版本的IE）
7、旋转、翻转图标
使用 fa-rotate-* 和 fa-flip-* 可以分别实现图标的旋转和翻转。
<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> fa-flip-vertical
8、叠加图标
要叠加多个图标，使用 fa-stack 设置容器。fa-stack-1x 表示正常大小的图标，fa-stack-2x 表示更大的图标。 fa-inverse 可以让图标反色。
<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" style="color:red;"></i> </span>
发表回复