add-icon

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Add a Font Awesome icon to the user's project. This skill handles icon name resolution, project detection, and code generation for every Font Awesome integration method.

Scripts referenced from

suggest-icon

are relative to

plugins/icons/skills/suggest-icon/

. Scripts referenced from

add-icon

are relative to

plugins/icons/skills/add-icon/

. Run them from their respective directories.

为用户的项目添加Font Awesome图标。该技能支持所有Font Awesome集成方式的图标名称解析、项目环境检测和代码生成。

suggest-icon

引用的脚本路径相对于

plugins/icons/skills/suggest-icon/

，

add-icon

引用的脚本路径相对于

plugins/icons/skills/add-icon/

，需在各自的目录下运行这些脚本。

Steps

步骤

1. Resolve the icon name

1. 解析图标名称

First, determine the Font Awesome version. If the user specifies one, use that. Otherwise run

./scripts/latest-version.py

(in the

suggest-icon

skill directory) to get the latest.

Then verify the icon exists by running:

./scripts/icon-exists.py --version <version> --icon-name <icon>

Exit code 0: the icon exists. Proceed.
Exit code 1: the icon does not exist. Invoke the
```
/suggest-icon
```
skill internally with the user's
```
icon
```
argument as the use-case. Auto-accept the top recommendation and continue with that icon name. Do not ask the user to confirm — a working icon is better than a broken one.

首先，确定Font Awesome版本。如果用户指定了版本，就使用该版本；否则运行

suggest-icon

技能目录下的

./scripts/latest-version.py

获取最新版本。

然后通过运行以下命令验证图标是否存在：

./scripts/icon-exists.py --version <version> --icon-name <icon>

退出码0：图标存在，继续执行。
退出码1：图标不存在。内部调用
```
/suggest-icon
```
技能，将用户传入的
```
icon
```
参数作为使用场景。自动接受排名第一的推荐图标，并使用该图标名称继续操作，无需询问用户确认——可用的图标比无法使用的图标更重要。

2. Determine the integration method

2. 确定集成方式

Check for a

.font-awesome.md

file in the project root.

检查项目根目录下是否存在

.font-awesome.md

文件。

.font-awesome.md

exists

若

.font-awesome.md

已存在

Read it and use the configuration it describes. Skip discovery and proceed to step 3. However, keep the file's contents in mind — if any later step reveals information that is missing or incomplete in the file (e.g., a new import pattern, a family not listed, a wrapper component not documented), you will update it at the end (see step 6).

读取该文件并使用其中描述的配置。跳过发现环节，直接进入步骤3。但需牢记文件内容——如果后续步骤中发现文件存在信息缺失或不完整（例如新的导入模式、未列出的图标家族、未记录的包装组件），需在最后更新该文件（见步骤6）。

.font-awesome.md

does not exist

若

.font-awesome.md

不存在

Run a discovery process to figure out how the project uses Font Awesome. Use a subagent (via the Agent tool with

subagent_type: "Explore"

) to perform this discovery. The subagent should search for the following sources (in order of specificity) and return a structured summary of what it found:

package.json
/ lock files — look for Font Awesome packages:
- ```
@fortawesome/react-fontawesome
```
  → React component integration
- ```
@fortawesome/vue-fontawesome
```
  → Vue component integration
- ```
@fortawesome/fontawesome-svg-core
```
  → SVG core (used by React/Vue)
- ```
@fortawesome/fontawesome-free
```
  or
```
@fortawesome/fontawesome-pro
```
  → general SVG+JS or web font
- ```
@fortawesome/free-solid-svg-icons
```
  ,
```
@fortawesome/pro-solid-svg-icons
```
  , etc. → individual icon packages (note the style and license)
HTML files / templates — look for:
- Font Awesome Kit script tags:
```
<script src="https://kit.fontawesome.com/XXXXXX.js"...>
```
 → Kit (SVG+JS). Extract the kit ID (the token before
```
.js
```
 ).
- CDN links in
```
<link>
```
 tags:
```
cdnjs.cloudflare.com/ajax/libs/font-awesome/
```
 or
```
use.fontawesome.com
```
 → Web Fonts+CSS via CDN
- ```

```
 or
```

```
 usage patterns → class-based (Web Fonts+CSS or SVG+JS)
Import statements in source files — scan for:
- ```
import { FontAwesomeIcon }
```
  → React component
- ```
import { library }
```
  from
```
@fortawesome/fontawesome-svg-core
```
  → library approach
- Individual icon imports like
```
import { faCoffee }
```
  → individual import approach
SVG sprite sheets — look for
```
<use href="...sprites/...">
```
patterns or sprite SVG files.
Web Components — look for
```
<fa-icon>
```
custom elements.
Other frameworks — look for Angular (
```
angular.json
```
,
```
FontAwesomeModule
```
), Svelte, etc.

The subagent should return: which Font Awesome packages are installed (with versions), any kit IDs found, CDN URLs, the framework integration method, import patterns observed in source files, the license (free vs pro), and any project conventions (wrapper components, default sizing, etc.).

After the subagent returns, if a kit ID was found, run

./scripts/fetch-kit.py --kit-id <id>

(in the

add-icon

skill directory) to get the kit's version, license, method, and available families.

After discovery, determine:

Integration method — the primary way icons are rendered
Kit ID / CDN URL — if using a kit or CDN
License —
```
free
```
or
```
pro
```
. Detect from: kit config (via
```
fetch-kit.py
```
), npm package names (
```
fontawesome-free
```
vs
```
fontawesome-pro
```
,
```
free-*-svg-icons
```
vs
```
pro-*-svg-icons
```
), or CDN URL patterns.
Default style — the most commonly used style in the project (solid, regular, light, thin, duotone). If unclear, default to
```
solid
```
.
Default family — the most commonly used family (classic, duotone, sharp, sharp-duotone, chisel, etch, graphite, jelly, jelly-duo, jelly-fill, notdog, notdog-duo, slab, slab-press, thumbprint, utility, utility-duo, utility-fill, whiteboard). If unclear, default to
```
classic
```
.
Available families — the set of families the project has access to. For kits, use the output of
```
fetch-kit.py
```
. For npm, infer from installed packages. For free users, only
```
classic
```
is available.
Import pattern — for JS frameworks: individual imports per-file vs. library registration
Version — the Font Awesome version in use
Project conventions — any wrapper components, standard sizing, or patterns observed

Write the results to

.font-awesome.md

in the project root using this format:

markdown

undefined

执行发现流程，以确定项目使用Font Awesome的方式。使用subagent（通过Agent工具，设置

subagent_type: "Explore"

）执行此发现操作。subagent应按以下优先级顺序搜索相关资源，并返回结构化的发现结果：

package.json
/ 锁文件——查找Font Awesome相关包：

```
@fortawesome/react-fontawesome
```
→ React组件集成方式
```
@fortawesome/vue-fontawesome
```
→ Vue组件集成方式
```
@fortawesome/fontawesome-svg-core
```
→ SVG核心（React/Vue使用）

@fortawesome/fontawesome-free

或

@fortawesome/fontawesome-pro

→ 通用SVG+JS或Web字体

@fortawesome/free-solid-svg-icons

、

@fortawesome/pro-solid-svg-icons

等 → 单个图标包（注意样式和授权）

HTML文件/模板——查找：
- Font Awesome Kit脚本标签：
```
<script src="https://kit.fontawesome.com/XXXXXX.js"...>
```
 → Kit（SVG+JS）集成方式。提取Kit ID（
```
.js
```
 前的令牌）。
- ```
<link>
```
 标签中的CDN链接：
```
cdnjs.cloudflare.com/ajax/libs/font-awesome/
```
 或
```
use.fontawesome.com
```
 → 通过CDN引入Web Fonts+CSS
- ```

```
 或
```

```
 使用模式 → 基于类名的集成方式（Web Fonts+CSS或SVG+JS）
源码文件中的导入语句——扫描以下内容：
- ```
import { FontAwesomeIcon }
```
  → React组件集成
- 从
```
@fortawesome/fontawesome-svg-core
```
  导入
```
{ library }
```
  → 库集成方式
- 单个图标导入，如
```
import { faCoffee }
```
  → 单个图标导入方式
SVG精灵表——查找
```
<use href="...sprites/...">
```
模式或精灵SVG文件。
Web组件——查找
```
<fa-icon>
```
自定义元素。
其他框架——查找Angular（
```
angular.json
```
、
```
FontAwesomeModule
```
）、Svelte等相关配置。

subagent应返回以下信息：已安装的Font Awesome包（含版本）、发现的Kit ID、CDN地址、框架集成方式、源码文件中观察到的导入模式、授权类型（免费版/专业版）以及项目约定（包装组件、默认尺寸等）。

subagent返回结果后，如果发现了Kit ID，运行

add-icon

技能目录下的

./scripts/fetch-kit.py --kit-id <id>

获取该Kit的版本、授权类型、集成方式和可用图标家族。

完成发现流程后，确定以下信息：

集成方式——图标渲染的主要方式
Kit ID / CDN地址——若使用Kit或CDN
授权类型——
```
free
```
或
```
pro
```
。通过以下方式检测：Kit配置（通过
```
fetch-kit.py
```
）、npm包名称（
```
fontawesome-free
```
vs
```
fontawesome-pro
```
、
```
free-*-svg-icons
```
vs
```
pro-*-svg-icons
```
）或CDN地址模式。
默认样式——项目中最常用的样式（solid、regular、light、thin、duotone）。若不明确，默认使用
```
solid
```
。
默认家族——项目中最常用的图标家族（classic、duotone、sharp、sharp-duotone、chisel、etch、graphite、jelly、jelly-duo、jelly-fill、notdog、notdog-duo、slab、slab-press、thumbprint、utility、utility-duo、utility-fill、whiteboard）。若不明确，默认使用
```
classic
```
。
可用家族——项目可访问的图标家族集合。对于Kit，使用
```
fetch-kit.py
```
的输出结果；对于npm项目，从已安装包推断；免费版用户仅可使用
```
classic
```
家族。
导入模式——JS框架相关：按文件单独导入 vs 全局库注册
版本——项目使用的Font Awesome版本
项目约定——任何项目特有的模式，如包装组件、默认尺寸等

将结果写入项目根目录下的

.font-awesome.md

文件，格式如下：

markdown

undefined

Font Awesome Configuration

Font Awesome配置

Detected by the Font Awesome agent tools. Commit this file so the whole team benefits.

由Font Awesome Agent工具检测生成。请提交此文件，以便团队共享信息，加快后续图标添加操作。

Integration

集成信息

Method: [e.g., React components via @fortawesome/react-fontawesome]
Version: [e.g., 7.2.0]
License: [Free or Pro]
Kit ID: [if applicable, or omit]
CDN URL: [if applicable, or omit]
Families: [e.g., classic, duotone, sharp, sharp-duotone — list all available families]

方式： [例如：通过@fortawesome/react-fontawesome使用React组件]
版本： [例如：7.2.0]
授权类型： [免费版或专业版]
Kit ID： [若适用，否则省略]
CDN地址： [若适用，否则省略]
图标家族： [例如：classic, duotone, sharp, sharp-duotone — 列出所有可用家族]

Defaults

默认设置

Style: [e.g., solid]
Family: [e.g., classic]

样式： [例如：solid]
家族： [例如：classic]

Import Pattern

导入模式

[Describe how icons are imported/used in this project. Examples:]

Individual imports:

import { faCartShopping } from '@fortawesome/pro-solid-svg-icons'

Component:

<FontAwesomeIcon icon={faCartShopping} />

[描述项目中图标的导入/使用方式。示例：]

单独导入：

import { faCartShopping } from '@fortawesome/pro-solid-svg-icons'

组件使用：

<FontAwesomeIcon icon={faCartShopping} />

Conventions

项目约定

[Any project-specific patterns observed, e.g.:]

Icons are wrapped in a custom
```
<Icon>
```
component at
```
src/components/Icon.tsx
```
Default size is
```
lg
```


Tell the user: "I've written `.font-awesome.md` with your project's Font Awesome configuration. You should commit this file so the team benefits and future icon additions are faster."

**Do not proceed to the next step until `.font-awesome.md` has been written.** The remaining steps depend on this file. If discovery fails to produce enough information to write a meaningful `.font-awesome.md`, stop and ask the user to clarify their Font Awesome setup before continuing.

[观察到的项目特有的模式，例如：]

图标被包装在自定义
```
<Icon>
```
组件中，路径为
```
src/components/Icon.tsx
```
默认尺寸为
```
lg
```


告知用户：“我已将项目的Font Awesome配置写入`.font-awesome.md`文件。请提交此文件，以便团队共享信息，加快后续图标添加操作。”

**在`.font-awesome.md`文件写入完成前，请勿进入下一步。**后续步骤依赖此文件。若发现流程无法获取足够信息以生成有意义的`.font-awesome.md`文件，请停止操作并询问用户，让其明确Font Awesome的配置后再继续。

3. Determine the icon style and family

3. 确定图标样式和家族

Style — use this precedence:

If the user passed a
```
style
```
argument, use that.
Otherwise, use the default style from
```
.font-awesome.md
```
.
If neither, default to
```
solid
```
.

Family — use this precedence:

If the user explicitly requested a family, use that.
Otherwise, use the default family from
```
.font-awesome.md
```
.
If neither, default to
```
classic
```
.

Verify the icon is available in the chosen style and family by checking the output from

icon-exists.py

(it prints available families and styles). If the icon is not available in the requested style or family, tell the user and suggest available alternatives. Also check that the chosen family is in the project's available families list — if not, warn the user.

样式——按以下优先级确定：

如果用户传入了
```
style
```
参数，使用该参数值。
否则，使用
```
.font-awesome.md
```
中的默认样式。
若以上均不满足，默认使用
```
solid
```
。

家族——按以下优先级确定：

如果用户明确指定了图标家族，使用该家族。
否则，使用
```
.font-awesome.md
```
中的默认家族。
若以上均不满足，默认使用
```
classic
```
。

通过

icon-exists.py

的输出结果（该命令会打印可用的家族和样式）验证图标在所选样式和家族中是否可用。若图标在请求的样式或家族中不可用，告知用户并推荐可用的替代选项。同时检查所选家族是否在项目的可用家族列表中——若不在，向用户发出警告。

4. Generate the code

4. 生成代码

Based on the integration method from

.font-awesome.md

, generate the correct code. Below are the patterns for each method. Match the conventions observed in the project — don't introduce a new pattern if the project already has an established one.

根据

.font-awesome.md

中的集成方式生成正确的代码。以下是各集成方式的代码模式。需匹配项目中已有的约定——若项目已有既定模式，请勿引入新的模式。

React (

@fortawesome/react-fontawesome

)

React（

@fortawesome/react-fontawesome

）

Individual imports (preferred when project uses this pattern):

jsx

import { faCartShopping } from '@fortawesome/pro-solid-svg-icons'
// or @fortawesome/free-solid-svg-icons for free icons

<FontAwesomeIcon icon={faCartShopping} />

The import name is the icon name in camelCase prefixed with

fa

. For example:

cart-shopping

→

faCartShopping

The package name follows the pattern:

@fortawesome/{free|pro}-{style}-svg-icons

. For example:

```
@fortawesome/free-solid-svg-icons
```
```
@fortawesome/pro-regular-svg-icons
```
```
@fortawesome/pro-duotone-svg-icons
```
```
@fortawesome/sharp-solid-svg-icons
```

@fortawesome/sharp-duotone-solid-svg-icons

Library approach (when project registers icons globally):

jsx

// In the library setup file:
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCartShopping } from '@fortawesome/pro-solid-svg-icons'
library.add(faCartShopping)

// In components — use string reference:
<FontAwesomeIcon icon="cart-shopping" />
// or with explicit prefix for non-solid styles:
<FontAwesomeIcon icon={['far', 'cart-shopping']} />

Style prefixes:

fas

(solid),

far

(regular),

fal

(light),

fat

(thin),

fad

(duotone),

fass

(sharp solid),

fasr

(sharp regular),

fasl

(sharp light),

fast

(sharp thin),

fasd

(sharp duotone).

单独导入（项目使用此模式时优先采用）：

jsx

import { faCartShopping } from '@fortawesome/pro-solid-svg-icons'
// 免费图标使用@fortawesome/free-solid-svg-icons

<FontAwesomeIcon icon={faCartShopping} />

导入名称为小驼峰式的图标名称，前缀为

fa

。例如：

cart-shopping

→

faCartShopping

。

包名称遵循以下模式：

@fortawesome/{free|pro}-{style}-svg-icons

。例如：

```
@fortawesome/free-solid-svg-icons
```
```
@fortawesome/pro-regular-svg-icons
```
```
@fortawesome/pro-duotone-svg-icons
```
```
@fortawesome/sharp-solid-svg-icons
```

@fortawesome/sharp-duotone-solid-svg-icons

库集成方式（项目全局注册图标时使用）：

jsx

// 在库设置文件中：
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCartShopping } from '@fortawesome/pro-solid-svg-icons'
library.add(faCartShopping)

// 在组件中——使用字符串引用：
<FontAwesomeIcon icon="cart-shopping" />
// 非solid样式需显式指定前缀：
<FontAwesomeIcon icon={['far', 'cart-shopping']} />

样式前缀：

fas

（solid）、

far

（regular）、

fal

（light）、

fat

（thin）、

fad

（duotone）、

fass

（sharp solid）、

fasr

（sharp regular）、

fasl

（sharp light）、

fast

（sharp thin）、

fasd

（sharp duotone）。

Vue (

@fortawesome/vue-fontawesome

)

Vue（

@fortawesome/vue-fontawesome

）

Similar to React but with Vue component syntax:

vue

<font-awesome-icon :icon="['fas', 'cart-shopping']" />

Imports follow the same package/naming conventions as React.

与React类似，但使用Vue组件语法：

vue

<font-awesome-icon :icon="['fas', 'cart-shopping']" />

导入规则与React的包/命名约定一致。

SVG+JS Kit (

<script src="https://kit.fontawesome.com/...">

)

SVG+JS Kit（

<script src="https://kit.fontawesome.com/...">

）

html

<i class="fa-solid fa-cart-shopping"></i>

Class pattern depends on the family:

classic (default, no family prefix needed):

fa-{style} fa-{icon-name}

<i class="fa-solid fa-cart-shopping"></i>

sharp:

fa-sharp fa-{style} fa-{icon-name}

<i class="fa-sharp fa-regular fa-cart-shopping"></i>

sharp-duotone:

fa-sharp-duotone fa-{style} fa-{icon-name}

<i class="fa-sharp-duotone fa-solid fa-cart-shopping"></i>

duotone:

fa-duotone fa-{style} fa-{icon-name}

<i class="fa-duotone fa-solid fa-cart-shopping"></i>

Other FA7 families (chisel, etch, graphite, jelly, jelly-duo, jelly-fill, notdog, notdog-duo, slab, slab-press, thumbprint, utility, utility-duo, utility-fill, whiteboard):
```
fa-{family} fa-{style} fa-{icon-name}
```
- ```

```
- ```

```

No imports needed — the kit handles loading.

html

<i class="fa-solid fa-cart-shopping"></i>

类名模式取决于图标家族：

classic（默认，无需家族前缀）：

fa-{style} fa-{icon-name}

<i class="fa-solid fa-cart-shopping"></i>

sharp：

fa-sharp fa-{style} fa-{icon-name}

<i class="fa-sharp fa-regular fa-cart-shopping"></i>

sharp-duotone：

fa-sharp-duotone fa-{style} fa-{icon-name}

<i class="fa-sharp-duotone fa-solid fa-cart-shopping"></i>

duotone：

fa-duotone fa-{style} fa-{icon-name}

<i class="fa-duotone fa-solid fa-cart-shopping"></i>

其他FA7家族（chisel、etch、graphite、jelly、jelly-duo、jelly-fill、notdog、notdog-duo、slab、slab-press、thumbprint、utility、utility-duo、utility-fill、whiteboard）：
```
fa-{family} fa-{style} fa-{icon-name}
```
- ```

```
- ```

```

无需导入——Kit会处理资源加载。

Web Fonts+CSS (CDN or npm)

Web Fonts+CSS（CDN或npm）

Same class syntax as SVG+JS Kit:

html

<i class="fa-solid fa-cart-shopping"></i>

Family prefixes work the same way (e.g.,

fa-sharp fa-solid fa-cart-shopping

). Ensure the appropriate CSS file is loaded (all.css or individual style sheets).

类名语法与SVG+JS Kit相同：

html

<i class="fa-solid fa-cart-shopping"></i>

家族前缀规则相同（例如：

fa-sharp fa-solid fa-cart-shopping

）。确保已加载对应的CSS文件（all.css或单独的样式表）。

SVG Sprites

SVG精灵表

html

<svg class="icon">
  <use href="/path/to/sprites/solid.svg#cart-shopping"></use>
</svg>

Match the sprite path used elsewhere in the project.

html

<svg class="icon">
  <use href="/path/to/sprites/solid.svg#cart-shopping"></use>
</svg>

匹配项目中已使用的精灵表路径。

Angular

html

<fa-icon [icon]="faCartShopping"></fa-icon>

With the corresponding import in the component's TypeScript file.

html

<fa-icon [icon]="faCartShopping"></fa-icon>

需在组件的TypeScript文件中添加对应的导入语句。

Web Components (

<fa-icon>

)

Web组件（

<fa-icon>

）

html

<fa-icon class="fa-solid fa-cart-shopping"></fa-icon>

html

<fa-icon class="fa-solid fa-cart-shopping"></fa-icon>

5. Insert or display

5. 插入或展示代码

If the user provided a
location
argument:

Find the specified location in the code. Insert the icon code there, including any necessary import statements at the top of the file. Follow the project's existing patterns for formatting and placement.

If no location was provided:

Present the code snippet in a fenced code block with the appropriate language tag. If imports are needed, show them separately so the user knows what goes where.

Example output:

Add this import (if not already present):
jsx
import { faCartShopping } from '@fortawesome/pro-solid-svg-icons'
Then use the component:
jsx
<FontAwesomeIcon icon={faCartShopping} />

如果用户提供了
location
参数：

找到代码中的指定位置。将图标代码插入该位置，包括文件顶部所需的导入语句。遵循项目现有的格式和放置约定。

如果未提供
location
参数：

将代码片段放在带语言标签的代码块中展示。若需要导入语句，单独展示导入部分，让用户了解其放置位置。

示例输出：

添加以下导入语句（若尚未存在）：
jsx
import { faCartShopping } from '@fortawesome/pro-solid-svg-icons'
然后使用组件：
jsx
<FontAwesomeIcon icon={faCartShopping} />

6. Pro icon notice

6. 专业版图标提示

If the icon is Pro-only and the project is using the free tier (based on

.font-awesome.md

license field or discovered packages), warn the user:

Note:
cart-shopping
requires a Font Awesome Pro subscription. Your project appears to be using Font Awesome Free.

若图标为专业版专属，而项目使用的是免费版（根据

.font-awesome.md

中的授权字段或发现的包判断），向用户发出警告：

注意：
cart-shopping
需要Font Awesome Pro订阅。您的项目当前使用的是Font Awesome免费版。

7. Update

.font-awesome.md

if needed

7. 必要时更新

.font-awesome.md

Review whether any information discovered during this run is missing from

.font-awesome.md

. Examples of things that might be incomplete:

A new import pattern was used that isn't documented under Import Pattern
A family or style was encountered that isn't listed under Families
A wrapper component or project convention was observed that isn't in Conventions
The version, license, or integration method has changed

If anything is missing or outdated, update

.font-awesome.md

with the new information — keep the same format, just fill in the gaps. Do not rewrite sections that are already accurate. Let the user know what was updated so they can commit the change.

检查本次操作中发现的信息是否有缺失在

.font-awesome.md

中的内容。可能存在不完整的情况包括：

使用了导入模式部分未记录的新导入模式
遇到了图标家族部分未列出的家族或样式
观察到了项目约定部分未记录的包装组件或项目模式
版本、授权类型或集成方式发生了变化

若存在信息缺失或过时的情况，使用新信息更新

.font-awesome.md

——保持原有格式，仅补充缺失内容。请勿重写已准确的部分。告知用户更新内容，以便其提交更改。

add-icon

Original

Translation

Steps

步骤

1. Resolve the icon name

1. 解析图标名称

2. Determine the integration method

2. 确定集成方式

If .font-awesome.md exists

若.font-awesome.md已存在

If .font-awesome.md does not exist

若.font-awesome.md不存在

Font Awesome Configuration

Font Awesome配置

Integration

集成信息

Defaults

默认设置

Import Pattern

导入模式

Conventions

项目约定

3. Determine the icon style and family

3. 确定图标样式和家族

4. Generate the code

4. 生成代码

React (@fortawesome/react-fontawesome)

React（@fortawesome/react-fontawesome）

Vue (@fortawesome/vue-fontawesome)

Vue（@fortawesome/vue-fontawesome）

SVG+JS Kit (<script src="https://kit.fontawesome.com/...">)

SVG+JS Kit（<script src="https://kit.fontawesome.com/...">）

Web Fonts+CSS (CDN or npm)

Web Fonts+CSS（CDN或npm）

SVG Sprites

SVG精灵表

Angular

Angular

Web Components (<fa-icon>)

Web组件（<fa-icon>）

5. Insert or display

5. 插入或展示代码

6. Pro icon notice

6. 专业版图标提示

7. Update .font-awesome.md if needed

7. 必要时更新.font-awesome.md

If
`.font-awesome.md`
exists

若
`.font-awesome.md`
已存在

If
`.font-awesome.md`
does not exist

若
`.font-awesome.md`
不存在

React (
`@fortawesome/react-fontawesome`
)

React（
`@fortawesome/react-fontawesome`
）

Vue (
`@fortawesome/vue-fontawesome`
)

Vue（
`@fortawesome/vue-fontawesome`
）

SVG+JS Kit (
`<script src="https://kit.fontawesome.com/...">`
)

SVG+JS Kit（
`<script src="https://kit.fontawesome.com/...">`
）

Web Components (
`<fa-icon>`
)

Web组件（
`<fa-icon>`
）

7. Update
`.font-awesome.md`
if needed

7. 必要时更新
`.font-awesome.md`