Font Awesome 指南和你可能不知道的实用技巧。1. 调整图标大小 2. 列表中的图标 3. 旋转图标 4. 动画图标 5. 堆叠图标 6. 缩放图标 7. 定位图标 8. 遮罩图标 9. 图标上方显示文字 10. 为图标添加计数器

2025-05-28

您可能不知道的 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">
Enter fullscreen mode Exit fullscreen mode

或者缩小版本



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
Enter fullscreen mode Exit fullscreen mode

这是图标的公式



<i class="fa[first letter of style(s|r|l|d)] fa-[name of the icon]"></i>
Enter fullscreen mode Exit fullscreen mode

图标总是使用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>
Enter fullscreen mode Exit fullscreen mode

替代文本
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>
Enter fullscreen mode Exit fullscreen mode

替代文本

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>
Enter fullscreen mode Exit fullscreen mode

这些课程的作用如下

替代文本

替代文本

4.动画图标

此外，仅通过添加一个简单的类，FA 就为您提供了一些可添加到图标的基本动画，例如spin( fa-spin)和pulse( fa-pulse)



<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-spinner fa-pulse"></i>
Enter fullscreen mode Exit fullscreen mode

替代文本

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>
Enter fullscreen mode Exit fullscreen mode

替代文本

以下功能需要 Font Awesome 的 JS 版本！
请将其包含在您的head标签内。



<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js"></script>
Enter fullscreen mode Exit fullscreen mode

或者缩小版本



<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

替代文本

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>
Enter fullscreen mode Exit fullscreen mode

替代文本

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>
Enter fullscreen mode Exit fullscreen mode

替代文本
在那里，我们结合



<i class="fas fa-comment"></i>
Enter fullscreen mode Exit fullscreen mode

和



<i class="fas fa-pencil-alt"></i>
Enter fullscreen mode Exit fullscreen mode

工作原理
属性 中包含内部图标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>
Enter fullscreen mode Exit fullscreen mode

你需要将图标包装到一个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>
Enter fullscreen mode Exit fullscreen mode

它的工作方式与在图标上放置文本相同，但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
Devto 翻译
PREV
CSS 概念 - 您唯一需要的指南
NEXT
图标库 20 个最佳/最大的图标库。名词项目