您可能不知道的 Font Awesome 指南和有用的技巧。
1. 调整图标尺寸
2.列表中的图标
3.旋转图标
4.动画图标
5.堆叠图标
6.缩放图标
7.定位图标
8.遮罩图标
9.图标上的文字
10.图标添加计数器
你们中的许多人可能至少听说过 Font Awesome，或者甚至每天都在使用它。
但如果您不知道的话，Font Awesome 是一个很棒的网络图标库，其中包含数千个不同风格的图标。
它使用 SVG 创建图标，不过不用担心，你不需要了解任何 SVG 知识！那就开始吧
FA图标有4种风格
- 坚硬的
- 常规的
- 光
- 双色调
其中，Solid 大部分时候是免费的，其余的只有专业版。
要使用 Font Awesome 的任何功能，首先需要在 HTMLhead标签中包含此行。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
或者缩小版本
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
这是图标的公式
<i class="fa[first letter of style(s|r|l|d)] fa-[name of the icon]"></i>
图标总是使用i标签，并且所有内容都属于class属性。
现在我们已经了解了最基本的知识，让我向您展示 Font Awesome 提供的一些非常有用的功能！
1. 调整图标尺寸
没错！FA 允许你不使用任何 CSS 来调整图标大小，只需创建自己的类名，然后添加到图标上即可。
<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>
fa-#x课程时间为 2-10（fa-[2-10]x）。以下是每个课程的字体大小
这样不是容易多了？
2.列表中的图标
fa-ul您可以通过向列表添加类并将图标包装在类中，span轻松fa-li地在列表元素之前添加图标
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
<li><span class="fa-li"><i class="fas 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>
3.旋转图标
您还可以旋转图标而不使用 CSS 的transform属性，只需添加一个类！
<div class="fa-4x">
<i class="fas fa-snowboarding"></i>
<i class="fas fa-snowboarding fa-rotate-90"></i>
<i class="fas fa-snowboarding fa-rotate-180"></i>
<i class="fas fa-snowboarding fa-rotate-270"></i>
<i class="fas fa-snowboarding fa-flip-horizontal"></i>
<i class="fas fa-snowboarding fa-flip-vertical"></i>
<i class="fas fa-snowboarding fa-flip-both"></i>
</div>
这些课程的作用如下
4.动画图标
此外，仅通过添加一个简单的类，FA 就为您提供了一些可添加到图标的基本动画，例如spin( fa-spin)和pulse( fa-pulse)
<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-spinner fa-pulse"></i>
5.堆叠图标
为此，您只需fa-stack向父元素添加类，并在其中定期放置图标，如下所示
<span class="fa-stack fa-2x">
<i class="fas fa-square fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
以下功能需要 Font Awesome 的 JS 版本！
请将其包含在您的head标签内。
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js"></script>
或者缩小版本
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"></script>
6.缩放图标
缩放会影响图标大小，而不会更改或移动容器。要放大或缩小图标，请使用
grow-#和shrink-#以及任意值（包括小数）。
因此，您可以更改图标的大小，而不会影响父元素。
以下是一个例子：
<div class="fa-4x">
<i class="fas fa-seedling" data-fa-transform="shrink-8" style="background:MistyRose"></i>
<i class="fas fa-seedling" style="background:MistyRose"></i>
<i class="fas fa-seedling" data-fa-transform="grow-6" style="background:MistyRose"></i>
</div>
7.定位图标
定位会影响图标的位置，而不会更改或移动容器。要上下左右移动图标，请使用
up-#、down-#、left-#和 以及right-#任意值（包括小数）。
您还可以定位图标，而不会影响父元素。这几乎就像 CSS 中的绝对定位一样。
例子
<div class="fa-4x">
<i class="fas fa-seedling" data-fa-transform="shrink-8" style="background:MistyRose"></i>
<i class="fas fa-seedling" data-fa-transform="shrink-8 up-6" style="background:MistyRose"></i>
<i class="fas fa-seedling" data-fa-transform="shrink-8 right-6" style="background:MistyRose"></i>
<i class="fas fa-seedling" data-fa-transform="shrink-8 down-6" style="background:MistyRose"></i>
<i class="fas fa-seedling" data-fa-transform="shrink-8 left-6" style="background:MistyRose"></i>
</div>
8.遮罩图标
此功能允许您将 2 个图标合并为 1 个，类似于堆叠。
<div class="fa-4x">
<i class="fas fa-pencil-alt" data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-comment" style="background:MistyRose"></i>
</div>
在那里，我们结合
<i class="fas fa-comment"></i>
和
<i class="fas fa-pencil-alt"></i>
工作原理
属性 中包含内部图标class的名称，如上例所示。 属性中包含外部图标的名称。在本例中fas fa-pencil-altdata-fa-maskfas fa-comment
9.图标上的文字
您可以在图标上添加文本。
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-calendar"></i>
<span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3" style="font-weight:900">27</span>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-certificate"></i>
<span class="fa-layers-text fa-inverse" data-fa-transform="shrink-11.5 rotate--30" style="font-weight:900">NEW</span>
</span>
你需要将图标包装到一个span元素中，并fa-layers为其添加 class。
在元素内部添加图标，以及另一个span包含文本的元素，并添加fa-layers-textclass。
10.图标添加计数器
您还可以在图标上添加计数器。一个很好的例子是在信封图标上显示收到的消息数量。
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-envelope"></i>
<span class="fa-layers-counter" style="background:Tomato">1,419</span>
</span>
它的工作方式与在图标上放置文本相同，但fa-layers-text您需要添加的fa-layers-counter是类，而不是。
计数器默认位于右上角，但您也可以将其放置在其他位置。
可以使用
fa-layers-bottom-left、fa-layers-bottom-right和fa-layers-top-left默认的 来定位fa-layers-top-right。溢出的文本将被省略号截断。
很棒，不是吗？
文章来源：https://dev.to/weeb/font-awesome-guide-and-useful-tricks-you-might-ve-not-known-about-until-now-o15