React 怎么导入 Font Awesome 字体

#开始

要开始，您需要使用 npm 和 yarn 等包管理器将以下包安装到您的项目中。 以下是安装您需要的一切的示例，以及我们使用每个相应包管理器的可靠图标样式。

npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/react-fontawesome

请参阅此 Stack Overflow 问题，了解 和 之间的区别。 Yarn 还允许您使用保存为开发依赖项。--save--save-dev--dev

#添加其他样式

如果您想使用其他样式的图标，您还需要安装它们。 下面是一个示例，说明如何通过 npm 添加我们的品牌图标和免费的常规样式图标集。

npm i --save @fortawesome/pro-solid-svg-icons
npm i --save @fortawesome/pro-regular-svg-icons
npm i --save @fortawesome/pro-light-svg-icons
npm i --save @fortawesome/pro-duotone-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-duotone-svg-icons

为了使用 Pro 图标，您需要将要使用的图标类型传递到组件的属性中。 继续阅读以获取有关使用的更详细说明：图标

  // Light:
  <FontAwesomeIcon icon={["fal", "coffee"]} />
  // Regular:
  <FontAwesomeIcon icon={["far", "coffee"]} />
  // Solid
  <FontAwesomeIcon icon={["fas", "coffee"]} />
  // ...or, omit as FontAwesome defaults to solid, so no need to prefix:
  <FontAwesomeIcon icon="coffee" />
  // Brand:
  <FontAwesomeIcon icon={["fab", "github"]} />

其他:
Font Awesome 离线下载:https://pan.quark.cn/s/a95a709e777f