如何在 React js 上正确使用 fontawesome？

Question

首先我安装fontawesome并像这样导入它。

从“@fortawesome/react-fontawesome”导入{ FontAwesomeIcon }

我找到了我的图标和反应代码

但它对我不起作用。

Answer 1

你可以这样使用它;

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

<FontAwesomeIcon icon={faCoffee} />

您必须导入图标。您可以在文档中查看详细用法。

Answer 2

正如字体awesome文档中所写的，您可以像这样轻松地使用它:

首先，通过以下方式安装包：

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

然后你可以像这样使用它：

  // 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"]} />

您也可以这样使用：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

const element = <FontAwesomeIcon icon={faCoffee} />

尺寸：

  <FontAwesomeIcon icon="coffee" size="xs" />
  <FontAwesomeIcon icon="coffee" size="lg" />
  <FontAwesomeIcon icon="coffee" size="6x" />