Reactjs 向我的react应用程序添加字体很棒的图标

嘿，我刚从React开始，所以我通过npm下载了font-awesome，并在App.js中导入了font-awesome.min.css文件

import 'font-awesome/css/font-awesome.min.css';

下面是两个代码

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

第一个不起作用，但我从stackoverflow答案复制粘贴的第二个效果相当奇怪。

---

如何解决此问题？

我的电脑中也出现了同样的错误。FontAwesome软件包的问题在于，它试图使用

节点_modules

目录中的字体，但无法从客户端使用

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

Font Awesome现在有一个官方的React组件，可供所有希望在React项目中使用我们图标的人使用

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

npm i——保存@fortawesome/fontawesome svg核心\
npm i—保存@fortawesome/free实心svg图标\
npm i——保存@fortawesome/react-fontawesome

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

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

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

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

此处的工作片段：

函数应用程序（）{
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）
@导入url（“https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
.App{
字体系列：无衬线；
文本对齐：居中；
}
您好，如果您只需在public/index.html的head标签中导入fontawesome工具包，则无需安装fontawesome库

您可以在fontawesome网站上找到fontawesome工具包的url

只需将此脚本放在public/index.html的head标记下，它就可以工作。
按照下面答案中的说明操作后，您已经解决了问题，因此是时候感谢帮助您将答案标记为选中的人了。他给出了一个巨大的答案，而你没有说一句简单的谢谢
import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

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