欢迎来到 Web Awesome，这是最大的也是最好的开源 Web 组件库。

使用包管理器

对于使用 npm、yarn 或 pnpm 包管理器的用户，您可以使用 Font Awesome 包来使您的项目保持最新图标和改进。

我们将介绍如何选择最适合您需求的包、访问配置以及添加和使用图标的技巧。

我们提供了一些可用的包组

包	包含内容	适合用途
工具包包新功能！	您在工具包中添加的任何内容 - 自定义图标、Font Awesome 图标和样式的子集 - 以及其他任何内容。	自定义您的包
*pro--svg-icons**	基于 JavaScript 的经典系列 SVG 图标包。	与我们的 JavaScript API 或 JavaScript 组件结合使用
*sharp--svg-icons**	基于 JavaScript 的锐利系列 SVG 图标包。	与我们的 JavaScript API 或 JavaScript 组件结合使用
*free--svg-icons**	基于 JavaScript 的免费和品牌 SVG 图标包。	与我们的 JavaScript API 或 JavaScript 组件结合使用
fontawesome-pro	所有版本 6 的优点，包括所有最新功能和 Pro 图标，涵盖 2 个系列中的 5 种可用样式，经典系列和我们的全新锐利系列。此外，还有我们的品牌图标系列。	在 npm 包中获取 CSS、Web 字体、Sass & Less 和 SVG 资产
fontawesome-free	所有版本 6 的优点，但仅包含免费图标	开源项目

基本上，这些包包含了我们 Font Awesome for Web 下载或下载 Font Awesome 工具包时包含的所有内容，但打包成一个包。选择适合您项目的那个包，并按照以下步骤进行设置。

1. 配置 Pro 包访问

如果您计划使用 Pro 包（包含更多图标和样式），则需要拥有 Pro 计划的有效订阅和有效的 Pro 包令牌，然后按照以下步骤为您的项目配置 Pro 访问权限。

您的包令牌使您可以访问我们的注册表 npm.fontawesome.com。在接下来的步骤中，我们将配置特定于 NPM 范围的内容以使用此注册表。

工具包或 Font Awesome 包：我应该使用哪个？

工具包包 是我们的推荐选择。您可以选择仅使用您使用的样式或单个图标，甚至可以上传您自己的图标。它们是根据您的需求定制的。如果您拥有 Pro 订阅，请访问您的工具包创建一个工具包。

我们的 Font Awesome 包 仅包含 Font Awesome 官方图标。它们不会被子集化，因此下载量会更大。

特定于项目的，使用配置文件

这种每项目设置使您可以单独配置每个项目，这对于团队和 CI/CD 来说可能很有效。

要使用 npm、pnpm 或 yarn v1 进行身份验证，请在项目的根目录（或 package.json 文件所在的任何位置）中创建一个 .npmrc 文件。对于 yarn v2（或更高版本），您需要创建一个 .yarnrc.yml 文件。然后将以下代码段之一添加到文件中。

对于工具包包

如果您已将工具包子集化或将图标上传到特定工具包，并希望通过包管理器使用这些图标，请将以下内容添加到您的包管理器配置中。

.npmrc
.yarnrc.yml

@awesome.me:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX

npmScopes:
awesome.me:
  npmAlwaysAuth: true
  npmRegistryServer: "https://npm.fontawesome.com/"
  npmAuthToken: "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"

@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX

npmScopes:
fortawesome:
  npmAlwaysAuth: true
  npmRegistryServer: "https://npm.fontawesome.com/"
  npmAuthToken: "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"

我可以同时使用两者吗？

当然可以。您可以在同一个配置文件中同时指定 @awesome.me 和 @fortawesome。如果您正在迁移到较新的工具包包，这将很有用。

.npmrc
.yarnrc.yml

@awesome.me:registry=https://npm.fontawesome.com/
@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX

npmScopes:
awesome.me:
  npmAlwaysAuth: true
  npmRegistryServer: "https://npm.fontawesome.com/"
  npmAuthToken: "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
fortawesome:
  npmAlwaysAuth: true
  npmRegistryServer: "https://npm.fontawesome.com/"
  npmAuthToken: "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"

使用环境变量

使用环境变量配置 .npmrc 或 .yarnrc.yml 文件的一种更安全的方法。这有助于防止令牌泄露并使令牌轮换更容易（如果您需要执行令牌轮换）。

虽然 .npmrc 或 .yarnrc.yml 通常被检入到您的源代码存储库中，但环境变量的值不应被检入。使用环境变量来存储您的令牌是一种防止将其检入到您的源代码存储库中的方法，从而防止与不应该拥有它的人共享。

此示例使用 FONTAWESOME_PACKAGE_TOKEN 作为环境变量名称。

.npmrc
.yarnrc.yml

@fortawesome:registry=https://npm.fontawesome.com/
@awesome.me:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=${FONTAWESOME_PACKAGE_TOKEN}

npmScopes:
 fortawesome:
   npmAlwaysAuth: true
   npmRegistryServer: "https://npm.fontawesome.com/"
   npmAuthToken: ${FONTAWESOME_PACKAGE_TOKEN}
 awesome.me:
   npmAlwaysAuth: true
   npmRegistryServer: "https://npm.fontawesome.com/"
   npmAuthToken: ${FONTAWESOME_PACKAGE_TOKEN}

代理的基本身份验证

如果您使用的是代理，则可以在 .npmrc 文件中使用基本身份验证。

.npmrc
.yarnrc.yml

@fortawesome:registry=https://npm.fontawesome.com/
@awesome.me:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:username=username
//npm.fontawesome.com/:_password=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX

npmScopes:
 fortawesome:
   npmAlwaysAuth: true
   npmRegistryServer: "https://npm.fontawesome.com/"
   npmAuthIdent: "token:XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
 awesome.me:
   npmAlwaysAuth: true
   npmRegistryServer: "https://npm.fontawesome.com/"
   npmAuthIdent: "token:XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"

2. 安装您的包

安装 Font Awesome 包有三种选择

安装[.width-30]	您将获得的内容
工具包包新功能！	您在各种格式中的自定义图标、图标样式或您选择的单个图标。对于大多数项目，这是我们的推荐选择。
SVG 图标包	基于 JavaScript 的包，以系列和样式命名。如果您不使用工具包，这将允许您使用我们的 Javascript API、Javascript 组件和树状摇动。按照 Javascript API 的步骤操作进行此安装。
所有内容	免费和 Pro 包不仅包含所有样式的图标，还包含所有支持文件以使其呈现。我们不建议使用此包。此包与您从我们的下载页面获得的内容非常相似。您有很多选择可以使用此包，但它也是最大的包。

工具包包

如果您使用的是工具包，您可以使用以下命令安装工具包包 - 请确保将 KIT_CODE 替换为您的特定工具包的 ID

npm
yarn

npm install --save '@awesome.me/kit-KIT_CODE@latest'

yarn add --save '@awesome.me/kit-KIT_CODE@latest'

或者，如果您使用的是环境变量，则可以使用以下方法：

FONTAWESOME_PACKAGE_TOKEN=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX npm install --save '@awesome.me/kit-KIT_CODE@latest'

SVG 图标包

Pro 包

npm
yarn

npm install --save @fortawesome/fontawesome-svg-core

# Select the styles you need and install them with the following commands.

npm install --save @fortawesome/free-brands-svg-icons
npm install --save @fortawesome/pro-solid-svg-icons
npm install --save @fortawesome/pro-regular-svg-icons
npm install --save @fortawesome/pro-light-svg-icons
npm install --save @fortawesome/pro-thin-svg-icons
npm install --save @fortawesome/pro-duotone-svg-icons
npm install --save @fortawesome/sharp-solid-svg-icons
npm install --save @fortawesome/sharp-regular-svg-icons
npm install --save @fortawesome/sharp-light-svg-icons
npm install --save @fortawesome/sharp-thin-svg-icons

yarn add @fortawesome/fontawesome-svg-core

# Select the styles you need and install them with the following commands.

yarn add @fortawesome/free-brands-svg-icons
yarn add @fortawesome/pro-solid-svg-icons
yarn add @fortawesome/pro-regular-svg-icons
yarn add @fortawesome/pro-light-svg-icons
yarn add @fortawesome/pro-thin-svg-icons
yarn add @fortawesome/pro-duotone-svg-icons
yarn add @fortawesome/sharp-solid-svg-icons
yarn add @fortawesome/sharp-regular-svg-icons
yarn add @fortawesome/sharp-light-svg-icons
yarn add @fortawesome/sharp-thin-svg-icons

或者，如果您使用的是环境变量，则可以使用以下方法：

FONTAWESOME_PACKAGE_TOKEN=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX npm install --save @fortawesome/pro-solid-svg-icons

免费包

npm
yarn

npm install --save @fortawesome/fontawesome-svg-core

# Select the styles you need and install them with the following commands.

npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/free-regular-svg-icons
npm install --save @fortawesome/free-brands-svg-icons

yarn add @fortawesome/fontawesome-svg-core

# Select the styles you need and install them with the following commands.

yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-regular-svg-icons
yarn add @fortawesome/free-brands-svg-icons

所有内容

Pro 包

在您设置了全局或每项目访问权限后，可以通过 npm 或 yarn 安装版本 6 Pro 包

所有内容（npm）
所有内容（yarn）

npm install --save @fortawesome/fontawesome-pro

yarn add @fortawesome/fontawesome-pro

或者，如果您使用的是环境变量，则可以使用以下方法：

FONTAWESOME_PACKAGE_TOKEN=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX npm install --save @fortawesome/fontawesome-pro

免费包

如果您只需要免费图标，我们提供了一个精简的仅包含免费图标的包。使用以下命令安装：

所有内容（npm）
所有内容（yarn）

npm install --save @fortawesome/fontawesome-free

yarn add @fortawesome/fontawesome-free

3. 选择您的方法并添加图标

您已准备好将 Font Awesome 包用于您的项目。以下是一些常见的选择

4. 缓存您的 CI 依赖项

调整您的 CI 以降低带宽使用率。我们将向您展示如何操作。

5. 排除您的配置故障

支持的包管理器

Font Awesome 支持以下包管理器

私有和公共 npm 仓库

仓库	公共	需要有效的 Pro 订阅	工具包包	Font Awesome Pro	Font Awesome 免费
`https://npm.fontawesome.com`
`https://registry.yarnpkg.com`
`https://registry.npmjs.org`

注意：要使用私有 npm 仓库，需要有效的 Font Awesome Pro 订阅。

配置故障排除命令

使用以下命令获取包管理器的配置信息

npm：npm config list
经典 yarn：yarn config list --verbose
现代 yarn：yarn config --why（注意 npmScopes 条目）
pnpm：pnpm config list（注意 config from 部分）

使用私有仓库

如果您的应用程序需要使用私有仓库，请确保设置了凭据

`npm` 示例输出

; "user" config from /path/to/.npmrc
# ...
@fortawesome:registry = "https://npm.fontawesome.com/"
//npm.fontawesome.com/:_authToken = REDACTED

经典 `yarn` 示例输出

verbose 0.100133333 Found configuration file "/path/to/.npmrc".
# ...
'@fortawesome:registry': 'https://npm.fontawesome.com/',
'//npm.fontawesome.com/:_authToken': REDACTED,

现代 `yarn` 示例输出

YN0000: npmScopes, /path/to/.yarnrc.yml   Map(1) {
  'fortawesome' => Map(6) {
    'npmAlwaysAuth' => true,
    'npmAuthIdent' => null,
    'npmAuthToken' => 'REDACTED',
    'npmAuditRegistry' => null,
    'npmPublishRegistry' => null,
    'npmRegistryServer' => 'https://npm.fontawesome.com/'
  }
}

`pnpm` 示例输出

//npm.fontawesome.com/:_authToken=REDACTED
@fortawesome:registry=https://npm.fontawesome.com/
prefix=/path/to/nodejs/18.13.0/.npm
registry=https://registry.npmjs.org/
user-agent=pnpm/7.29.1 npm/? node/v18.13.0 darwin arm64
# ...

环境变量中的令牌

确保环境变量可供包管理器使用并可读，这可能是远程服务器上身份验证问题的原因。如果是这种情况，您将看到 4xx HTTP 状态码。

从私有仓库切换到公共仓库（反之亦然）

从私有仓库切换到公共仓库时，请从锁定文件（lock file）中删除当前安装的 Font Awesome 包。执行此操作的具体命令取决于您使用的包管理器（yarn 或 npm）。如果您足够勇敢，可以手动编辑这些文件。

使用包管理器

1. 配置 Pro 包访问

工具包或 Font Awesome 包：我应该使用哪个？

特定于项目的，使用配置文件

对于工具包包

对于 Font Awesome 包

我可以同时使用两者吗？

使用环境变量

代理的基本身份验证

2. 安装您的包

工具包包

SVG 图标包

Pro 包

免费包

所有内容

Pro 包

免费包

3. 选择您的方法并添加图标

4. 缓存您的 CI 依赖项

5. 排除您的配置故障

支持的包管理器

私有和公共 npm 仓库

配置故障排除命令

使用私有仓库

npm 示例输出

经典 yarn 示例输出

现代 yarn 示例输出

pnpm 示例输出

环境变量中的令牌

从私有仓库切换到公共仓库（反之亦然）

`npm` 示例输出

经典 `yarn` 示例输出

现代 `yarn` 示例输出

`pnpm` 示例输出