跳到内容
Font Awesome 文档
欢迎 Web Awesome，最大最好的开源 Web 组件库。
今天预订！

如何添加图标

您几乎可以在任何地方放置 Font Awesome 图标，我们尽力使图标能够自然地融入周围文本的特性。

我们将介绍如何在项目中添加图标的基础知识，不同图标 样式 的简写类名，如何将图标添加到 HTML，使用图标别名等等！

基础知识

要添加图标，您需要了解一些信息

  1. 您要使用的样式的简写类名
  2. 图标名称，以 fa- 为前缀（当然，意思是“Font Awesome”！）
  3. 您要使用的字体系列的简写类名 (可选)

字体系列 + 样式

Font Awesome 图标有三个系列 - 每个系列都有独特的外观、类名和 @font-face 字体系列。在 Font Awesome Classic 和 Sharp 中，Font Awesome 图标有五个 样式。以下是一些示例

Classic 系列

样式可用性样式类font-weight看起来像
实心免费计划fa-solid900
常规仅专业版fa-regular400
光明仅专业版fa-light300
细线仅专业版fa-thin100
双色调仅专业版fa-duotone900

Sharp 系列

样式可用性样式类font-weight看起来像
实心仅专业版fa-sharp fa-solid900
常规仅专业版fa-sharp fa-regular400
光明仅专业版fa-sharp fa-light300
细线仅专业版fa-sharp fa-thin100
双色调即将推出！

品牌系列

样式可用性样式类font-weight看起来像
品牌免费计划fa-brands400

将图标添加到 HTML

我们设计 Font Awesome 用于与内联元素一起使用，我们建议您在项目中坚持使用一致的元素。我们建议使用 <i> 元素，并使用 Font Awesome CSS 类作为样式类来表示您要使用的图标样式，以及带有 fa- 前缀的图标名称类来表示 您要使用的图标。注重无障碍性的用户可能希望选择 <span> 元素而不是 <i>。

以下是一个示例

<!-- This example uses <i> element with:
1. the `fa-solid` style class for solid style
2. the `user` icon with the `fa-` prefix -->
<i class="fa-solid fa-user"></i>


<!-- Or you can use a <span> element, with classes applied in the same way -->
<span class="fa-solid fa-user"></span>

设置不同的字体系列 + 样式

以下是一个引用不同样式和系列图标的示例

<!-- all styles of icons (in Font Awesome Classic by default) -->
<i class="fa-solid fa-user"></i>
<i class="fa-regular fa-user"></i>
<i class="fa-light fa-user"></i>
<i class="fa-thin fa-user"></i>
<i class="fa-duotone fa-user"></i>


<!-- a Brands icon -->
<i class="fa-brands fa-font-awesome"></i>


<!-- a specifically set Font Awesome Sharp Solid icon -->
<i class="fa-sharp fa-solid fa-user"></i>


<!-- a specifically set Font Awesome Sharp Regular icon -->
<i class="fa-sharp fa-regular fa-user"></i>


<!-- a specifically set Font Awesome Sharp Light icon -->
<i class="fa-sharp fa-light fa-user"></i>

别名

我们在版本 6 中更新了许多图标名称，使其更通用和一致。但我们希望确保不会破坏您现有的代码，因此我们为重命名的图标创建了别名，以便它们可以使用旧名称或新名称。

您还可以使用旧名称或新名称来表示样式。因此您仍然可以使用 fas、far、fal、fad 和 fab。我们还为新 Thin 样式（fat）和新的 Sharp 样式系列（Sharp Solid 是 fass，而 Sharp Regular 是 fasr）包含了旧的前缀版本。

<!-- All of these code snippets will render the same Solid icon thanks to aliases. -->
<i class="fa-solid fa-cutlery"></i>
<i class="fa-solid fa-utensils"></i>
<i class="fas fa-utensils"></i>


<!-- All of these code snippets will render the same Sharp Solid icon thanks to aliases. -->
<i class="fa-sharp fa-solid fa-times"></i>
<i class="fa-sharp fa-solid fa-close"></i>
<i class="fass fa-xmark"></i>

添加图标的其他方法

我们还有许多其他方法可以添加 Font Awesome 图标，以防您的情况需要一些特殊的东西

使用网络字体时

使用 SVGs 时