您需要将您希望使用的任何图标添加到“库”中以便于参考。

import React from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import fontawesome from '@fortawesome/fontawesome'
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import { faCheckSquare, faCoffee } from '@fortawesome/fontawesome-free-solid'

const styles = {
  fontFamily: 'sans-serif',
  textAlign: 'center',
};

fontawesome.library.add(faCheckSquare, faCoffee);

const App = () => (
  <div style={styles}>
    <FontAwesomeIcon icon="check-square" /><br /><br />
    <FontAwesomeIcon icon="coffee" />
  </div>
);

render(<App />, document.getElementById('root'));

在此处查看工作代码：https : //codesandbox.io/s/8y251kv448

另外，请阅读：https : //www.npmjs.com/package/@fortawesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app-more-conveniently

以防万一有其他像我这样的白痴，请确保在引用图标时使用正确的名称。

我有

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faUser } from "@fortawesome/free-solid-svg-icons";

library.add(faUser);

和

render() {
  return (        
    <FontAwesomeIcon icon="faUser" />
  );
}

实际上，实际的图标名称只是“user”，而不是“faUser”：

render() {
  return (        
    <FontAwesomeIcon icon="user" />
  );
}

您可以像这样使用没有库的 FontAwesome 图标：

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

<FontAwesomeIcon icon={faCoffee} />

我已经安装了所有必要的软件包，如react-fontawesome所说：

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

如果您在尝试显示faTrashAlt（或类似名称的图标）时发现自己没有看到您的图标，那么您不仅需要在实际使用图标时删除“fa”，还必须将图标名称从 cameCase 转换为“口齿不清”。

因此，在以这种方式加载替代垃圾桶图标后：

fontawesome.library.add(faTrashAlt);

然后以这种方式使用：

<FontAwesomeIcon icon="trash-alt" />

只是为了让您不要浪费宝贵的 20 分钟时间。