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

导入图标

准备引用图标？这里介绍了 Font Awesome 图标命名以及如何从图标内容包中导入图标的基础知识。

引用图标

我们建议您在 HTML 中使用专门用于图标的元素来引用图标。我们发现 <i> 标签非常适合此任务。该元素将包含：1) Font Awesome 特定的样式前缀（例如 fa-solid），以及 2) 要显示的图标名称（以 fa- 为前缀）。

<!-- solid style of the computer classic icon -->
<i class="fa-solid fa-computer-classic"></i>


<!-- regular style of the computer classic icon -->
<i class="fa-regular fa-computer-classic"></i>


<!-- light style of the computer classic icon -->
<i class="fa-light fa-computer-classic"></i>


<!-- thin style of the computer classic icon -->
<i class="fa-thin fa-computer-classic"></i>


<!-- duotone style of the computer classic icon -->
<i class="fa-duotone fa-computer-classic"></i>


<!-- sharp solid style of the computer classic icon -->
<i class="fa-sharp fa-solid fa-computer-classic"></i>


<!-- sharp regular style of the computer classic icon -->
<i class="fa-sharp fa-regular fa-computer-classic"></i>


<!-- sharp light style of the computer classic icon -->
<i class="fa-sharp fa-light fa-computer-classic"></i>


<!-- sharp thin style of the computer classic icon -->
<i class="fa-sharp fa-thin fa-computer-classic"></i>

系列和样式

Font Awesome 有三个系列的图标——每个系列都有独特的风格、类名和 @font-face 字體系列。在 Font Awesome Classic 和 Sharp 中，有五种Font Awesome 图标风格。以下是一些示例

Classic 系列

风格可用性代码
实心免费计划<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-brands fa-font-awesome"></i>

双色调系列

风格可用性代码
实心仅限专业版<i class="fa-duotone fa-user"></i>

Sharp 系列

风格可用性代码
实心仅限专业版<i class="fa-sharp fa-solid fa-user"></i>
常规仅限专业版<i class="fa-sharp fa-regular fa-user"></i>
浅色仅限专业版<i class="fa-sharp fa-light fa-user"></i>
细线仅限专业版<i class="fa-sharp fa-thin fa-user"></i>
双色调即将推出！

图标内容“编码”在 JavaScript 包中

Font Awesome 的第一个版本使用 Web 字体将图标数据编码到浏览器可以使用的容器中。在 5.0 版中，我们添加了对 SVG 的支持，这让我们可以对图标数据做一些有趣的事情。

可缩放矢量图形（SVG）由文本信息组成，这些文本信息可以包含路径。我们使用路径数据来绘制图标。

以下是我们 code 图标 的示例

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" height="72px">
  <path d="M228.5 511.8l-25-7.1c-3.2-.9-5-4.2-4.1-7.4L340.1 4.4c.9-3.2 4.2-5 7.4-4.1l25 7.1c3.2.9 5 4.2 4.1 7.4L235.9 507.6c-.9 3.2-4.3 5.1-7.4 4.2zm-75.6-125.3l18.5-20.9c1.9-2.1 1.6-5.3-.5-7.1L49.9 256l121-102.5c2.1-1.8 2.4-5 .5-7.1l-18.5-20.9c-1.8-2.1-5-2.3-7.1-.4L1.7 252.3c-2.3 2-2.3 5.5 0 7.5L145.8 387c2.1 1.8 5.3 1.6 7.1-.5zm277.3.4l144.1-127.2c2.3-2 2.3-5.5 0-7.5L430.2 125.1c-2.1-1.8-5.2-1.6-7.1.4l-18.5 20.9c-1.9 2.1-1.6 5.3.5 7.1l121 102.5-121 102.5c-2.1 1.8-2.4 5-.5 7.1l18.5 20.9c1.8 2.1 5 2.3 7.1.4z" />
</svg>

由于它只是文本，我们可以轻松地将这些信息存储在 JavaScript 文件中。这在某些项目中可能比 Web 字体文件和 CSS 更容易处理。

SVG 图标包名称

图标内容包按许可证和风格进行细分

包名称风格前缀示例可用性
@fortawesome/free-solid-svg-icons实心fa-solid免费版
@fortawesome/free-regular-svg-icons常规fa-regular免费版
@fortawesome/free-brands-svg-icons品牌fa-brands免费版
@fortawesome/pro-solid-svg-icons实心fa-solid仅限专业版
@fortawesome/pro-regular-svg-icons常规fa-regular仅限专业版
@fortawesome/pro-light-svg-icons浅色fa-light仅限专业版
@fortawesome/pro-thin-svg-icons细线fa-thin仅限专业版
@fortawesome/pro-duotone-svg-icons双色调fa-duotone仅限专业版
@fortawesome/sharp-solid-svg-iconsSharp 实心fa-sharp fa-solid仅限专业版
@fortawesome/sharp-regular-svg-iconsSharp 常规fa-sharp fa-regular仅限专业版
@fortawesome/sharp-light-svg-iconsSharp 浅色fa-sharp fa-light仅限专业版
@fortawesome/sharp-thin-svg-iconsSharp 细线fa-sharp fa-thin仅限专业版

专业版包需要一些额外的配置才能允许 NPM 安装。

图标名称

JavaScript 命名不使用连字符；它使用小驼峰式命名法。因此，以下是一些关于 imports 和 requires 工作方式的基本示例。

图标名称4.0 版名称小驼峰式使用说明
address-bookfa-address-bookfaAddressBook连字符后的“B”大写
facebook-ffa-facebookfaFacebookF它属于品牌风格，已重命名为 facebook-f
circlefa-circle-ofaCircle图标的轮廓版本现在属于常规和浅色风格
freebsdfa-freebsdfaFreebsd强迫症警告：我们知道它是 FreeBSD，但这里追求的是一致性和可推断性

导入这些特定图标

import { faSword } from '@awesome.me/kit-KIT_CODE/classic/solid'
import { faAxe } from '@awesome.me/kit-KIT_CODE/classic/regular'
import { faBowArrow } from '@awesome.me/kit-KIT_CODE/classic/light'
import { faHelmetBattle } from '@awesome.me/kit-KIT_CODE/classic/thin'
import { faShieldCross } from '@awesome.me/kit-KIT_CODE/duotone/solid'
import { faFaceHeadBandage } from '@awesome.me/kit-KIT_CODE/sharp/solid'
import { faPawClaws } from '@awesome.me/kit-KIT_CODE/sharp/regular'
import { faEyeEvil } from '@awesome.me/kit-KIT_CODE/sharp/light'
import { faRing } from '@awesome.me/kit-KIT_CODE/sharp/thin'


// Import uploaded icons from your Kit
import { faMyIcon } from '@awesome.me/kit-KIT_CODE/icons/kit/custom'

使用前缀导入所有图标

import { library } from '@fortawesome/fontawesome-svg-core'
import { all } from '@awesome.me/kit-KIT_CODE/icons'


library.add(...all)

要从不同风格导入相同的图标

import { library } from '@fortawesome/fontawesome-svg-core'
import { faTruck as fasTruck } from '@awesome.me/kit-KIT_CODE/icons/classic/solid'
import { faTruck as farTruck } from '@awesome.me/kit-KIT_CODE/icons/classic/regular'
import { faTruck as falTruck } from '@awesome.me/kit-KIT_CODE/icons/classic/light'
import { faTruck as fatTruck } from '@awesome.me/kit-KIT_CODE/icons/classic/thin'
import { faTruck as fadTruck } from '@awesome.me/kit-KIT_CODE/icons/duotone/solid'
import { faTruck as fassTruck } from '@awesome.me/kit-KIT_CODE/icons/sharp/solid'
import { faTruck as fasrTruck } from '@awesome.me/kit-KIT_CODE/icons/sharp/regular'
import { faTruck as faslTruck } from '@awesome.me/kit-KIT_CODE/icons/sharp/light'
import { faTruck as fastTruck } from '@awesome.me/kit-KIT_CODE/icons/sharp/thin'


library.add(fasTruck, farTruck, falTruck, fatTruck, fadTruck, fassTruck, fasrTruck, faslTruck, fastTruck)