Font Awesome 5 简介
Font Awesome 5
Font Awesome 5 有一个包含 7842 个图标的 PRO 版本，以及一个包含 1588 个图标的免费版本。本教程将重点介绍免费版本。
要使用免费的 Font Awesome 5 图标，您可以选择下载 Font Awesome 库，或者您可以在 Font Awesome 注册一个帐户，并获取一个代码（称为 KIT CODE）在您将 Font Awesome 添加到您的网页时使用。
我们更喜欢 KIT CODE 方法。获得代码后，您可以通过仅包含一行 HTML 代码来开始在您的网页上使用 Font Awesome
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></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>
结果为
注意：不需要下载或安装！
获取您自己的 KIT CODE
在以下地址注册并免费获取您自己的代码：
fontawesome.comFont Awesome 5 中的新增内容
Font Awesome 5 中新增了 fas 前缀，Font Awesome 4 使用 fa。
fas 中的 s 代表 _solid_，有些图标也有 _regular_ 模式，使用前缀 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.
结果为
