我在CodeSandbox中遇到了同样的错误。FontAwesome 包的问题在于它尝试使用node_modules目录中的字体，而从客户端则不可能。

另外，请注意您的图标是错误的。他们应该是：

<i className="fa fa-sun-o"/>
<i className="fa fa-spinner fa-spin"/>

Font Awesome 现在有一个官方的 React 组件，所有想要在他们的 React 项目中使用我们的图标的人都可以使用它。

首先，获取 Font Awesome SVG Core、Free solid icon 包和 Font Awesome React 组件的包：

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

然后在您的应用程序中，导入图标并将其添加到库中：

应用程序.js

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

library.add(faStroopwafel)

最后，在 JSX 中使用组件和图标：

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export const Food = () => (
  <div>
    Favorite Food: <FontAwesomeIcon icon="stroopwafel" />
  </div>
)

参考：如何通过 React 安装和使用 FontAwesome。

另一种简单的方法是使用 FontAwesome CDN：

@import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

此处的工作片段：CodeSandbox

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <i className="fa fa-sun-o" />
      <i className="fa fa-spinner fa-spin" />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

@import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

.App {
  font-family: sans-serif;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

嗨，如果您只是在 public/index.html 的 head 标签中导入您的 fontawesome 工具包，则无需安装 fontawesome 库

您可以在 fontawesome 网站上找到您的 fontawesome 套件的 url。

只需将此脚本放在 head 标签下的 public/index.html 中，它应该可以工作。