字体真棒 5 简介
Font Awesome 5
Font Awesome 5 有一个 PRO 版本，包含 7842 个图标，还有一个 FREE 版本，包含 1588 个图标。本教程将重点介绍 FREE 版本。
要使用免费的 Font Awesome 5 图标，您可以选择下载 Font Awesome 库，也可以在 Font Awesome 注册一个帐户，并获取一个代码（称为 KIT CODE），以便在将 Font Awesome 添加到您的网页时使用。
我们更喜欢 KIT CODE 方法。获得代码后，您只需在网页上添加一行 HTML 代码即可开始使用 Font Awesome：
<script src="https://kit.fontawesome.com/你的代码.js” crossorigin="匿名"></script>
例子
我们得到了代码 a076d05399 通过插入脚本标签和代码，我们就可以开始使用 Font Awesome 了：
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<i class="fas fa-clock"></i>
</body>
</html>
结果是：
笔记： 无需下载或安装！
获取您自己的套件代码
注册并免费获取您自己的代码：
fontawesome.comFont Awesome 5 的新功能
Font Awesome 5 中的新功能是 fas 前缀，Font Awesome 4 用途fa.
这 s 在fas 代表坚硬的，有些图标还带有 常规的 模式，使用前缀指定far:
Font Awesome 旨在与内联元素一起使用。 <i> 和<span> 元素广泛用于图标。
还要注意，如果您更改图标容器的字体大小或颜色，图标也会随之改变。阴影和使用 CSS 继承的其他内容也是如此。
例子
<i class="fas fa-clock" style="font-size:120px;color:#2196F3"></i>
<i class="far fa-clock" style="font-size:120px;color:#2196F3"></i>
结果是：
调整图标大小
这 fa-xs,
fa-sm,
fa-lg,
fa-2x,
fa-3x,
fa-4x,
fa-5x,
fa-6x,
fa-7x,
fa-8x,
fa-9x， 或者 fa-10x 类用于调整相对于其容器的图标大小。
例子
以下代码：
<i class="fas fa-clock fa-xs"></i>
<i class="fas fa-clock fa-sm"></i>
<i class="fas fa-clock fa-lg"></i>
<i class="fas fa-clock fa-2x"></i>
<i class="fas fa-clock fa-5x"></i>
<i class="fas fa-clock fa-10x"></i>
结果是：
列表图标
这 fa-ul 和fa-li 类用于替换无序列表中的默认项目符号。
例子
以下代码：
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>项目清单</li>
<li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>项目清单</li>
<li><span class="fa-li"><i class="fas fa-square"></i></span>项目清单</li>
</ul>
结果是：
动画图标
这 fa-spin 类获取任意图标进行旋转，并且fa-pulse 类使任意图标以 8 个步骤旋转。
例子
以下代码：
<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-sync-alt fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>
<i class="fas fa-cog fa-pulse"></i>
<i class="fas fa-spinner fa-pulse"></i>
结果是：
笔记： IE8 和 IE9 不支持 CSS3 动画。
旋转和翻转的图标
这 fa-rotate-* 和fa-flip-* 类用于旋转和翻转图标。
例子
以下代码：
<i class="fas fa-horse"></i>
<i class="fas fa-horse fa-rotate-90"></i>
<i class="fas fa-horse fa-rotate-180"></i>
<i class="fas fa-horse fa-rotate-270"></i>
<i class="fas fa-horse fa-flip-horizontal"></i>
<i class="fas fa-horse fa-flip-vertical"></i>
结果是：
堆叠图标
要堆叠多个图标，请使用 fa-stack 父类，fa-stack-1x 常规大小图标的类，以及fa-stack-2x 可查看更大的图标。
这 fa-inverse 类可用作替代图标颜色。您还可以向父级添加更大的图标类，以进一步控制尺寸。
例子
以下代码：
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
fa-twitter (反向) 位于 fa-circle (实心) 上<br>
<span class="fa-stack fa-lg">
<i class="far fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x"></i>
</span>
fa-twitter 在 fa-circle 上 (常规)<br>
<span class="fa-stack fa-lg">
<i class="fas fa-camera fa-stack-1x"></i>
<i class="fas fa-ban fa-stack-2x text-danger" style="color:red;"></i>
</span>
fa-ban 在 fa-camera 上
结果是：
固定宽度图标
就像字母和其他字符一样，图标可以有不同的宽度，如果您需要像在列表或菜单中一样垂直对齐图标，这可能会出现问题。
这 fa-fw 类用于设置固定宽度的图标。
例子
<p>固定宽度：</p>
<div><i class="fas fa-arrows-alt-v fa-fw"></i>图标 1</div>
<div><i class="fas fa-band-aid fa-fw"></i>图标 2</div>
<div><i class="fab fa-bluetooth-b fa-fw"></i>图标 3</div>
<p>无固定宽度：</p>
<div><i class="fas fa-arrows-alt-v"></i>图标 1</div>
<div><i class="fas fa-band-aid"></i>图标 2</div>
<div><i class="fab fa-bluetooth-b"></i>图标 3</div>
结果是：
亲自尝试 »
带边框和拉动的图标
这 fa-border, fa-pull-right 或者fa-pull-left 类别用于引言或文章图标。
例子
以下代码：
<i class="fas fa-quote-left fa-3x fa-pull-left fa-border"></i>
Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 Ut enim ad minim veniam，quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。
结果是：
