Font Awesome字体图标库下载
奥森图标（Font Awesome）提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ，颜色，阴影。它具有675个图标，兼容性强，使用和普通字体一样自由便捷,可任意缩放等特点。
Font Awesome字体图标使用也非常简单，下面介绍 一下Font Awesome字体图标使用方法。
第一步：下载Font AwesomeFont Awesome字体图标库安装包.
第二步：解压后，复制整个font-awesome目录到你的项目；
第三步：你的html <head>标签里, 引入 font-awesome.min.css；（注意修改路径）
<link rel="stylesheet" href="/font-awesome/css/font-awesome.min.css">
第四步：在需要显示字体图标的位置 ，放上以下的代码：
<i class="fa fa-camera-retro"></i>
代码解释：
fa类是基础类，fa-camera-retro是不同图片的类名。要放不同的图片就放对应的类名；类名见：图标库
使用的技巧
1、控制图标大小的类：fa-lg (扩大33% ), fa-2x, fa-3x, fa-4x, or fa-5x
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
2、相同的固定宽度的类：fa-fw
<i class="fas fa-skating fa-fw"></i>舞蹈
<span class="ct-8b1dc4"><</span><span class="ct-3e64f9">i</span> <span class="ct-d20032">class</span><span class="ct-8b1dc4">=</span><span class="ct-e8df36">"fas fa-skiing fa-fw"</span><span class="ct-8b1dc4">></</span><span class="ct-3e64f9">i</span><span class="ct-8b1dc4">>音乐</span>
3、用字段图标替换UL、OL列表的项目符号：fa-ul fa-li
<ul class="fa-ul">
<li><span class="fa-li"><i class="fa fa-check-square"></i></span>List icons can</li>
<li><span class="fa-li"><i class="fa fa-check-square"></i></span>be used to</li>
<li><span class="fa-li"><i class="fa fa-spinner fa-pulse"></i></span>replace bullets</li>
<li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>
4、控制字体图标旋转的类：fa-rotate-* 和 fa-flip-*
- fa-rotate-90 旋转90°
- fa-rotate-180 旋转180°
- fa-rotate-270 旋转270°
- fa-flip-horizontal 水平镜像图标
- fa-flip-vertical 垂直镜像图标
- fa-flip-both 垂直和水平镜像图标（需要 5.7.0 或更高版本）
<i class="fas fa-snowboarding fa-rotate-90"></i>
5、控制字体图标动画的类：使用 fa-spin 类让任何图标旋转，并使用 fa-pulse 让它以八步旋转。
<i class="fa fa-circle-notch fa-spin"></i>
6、控制字段图标加边框的类：fa-border
<i class="fa fa-quote-left fa-border" aria-hidden="true"></i>
7、控制字段图标左对齐和右对齐
- fa-pull-right ：右对齐
- fa-pull-left：左对齐
<i class="fa fa-quote-left fa-3x fa-pull-left" aria-hidden="true"></i>
8、多个图标进行组合的类：fa-stack fa-stack-1x(小图层) fa-stack-2x(大图层) fa-inverse(与上级图层相反的颜色)
<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>
