Css 在盖茨比react项目中升级字体很棒的图标，新图标不起作用

我正在使用盖茨比html5up模板进行react项目。我正在将字体很棒的图标从4.7升级到5.12。4.7图标正常工作，因此我将新文件位置与旧文件位置相比较

我下载了all.css文件和webfonts文件夹。我没有删除所有内容，而是将它们添加到新的和现有的文件夹中

在my main.scss中：

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

然后在我的src/assets/css文件夹中，我添加了我的all.css文件，与4.7 font-awome.min.css位于同一位置

然后我下载并将webfonts文件夹添加到src/assets

我的项目生成时没有错误，但图标不显示。我做错了什么

---

我找到了答案，并在这里发布，以防其他人也有同样的问题。
此项目的依赖项：

    "gatsby": "^2.15.14",
    "gatsby-plugin-manifest": "^2.2.16",
    "gatsby-plugin-offline": "^3.0.6",
    "gatsby-plugin-react-helmet": "^3.1.7",
    "gatsby-plugin-sass": "^2.1.14",
    "node-sass": "^4.12.0",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-helmet": "^5.2.1"

我使用的模板是

gatsby-starter-four-v2

采取的步骤：

从fontawesome网站下载

all.css

文件并放入

/src/assets/css

文件夹。 下载

webfonts

文件夹并放入

/src/assets

文件夹 （

all.css

按名称引用

webfont

文件夹，必须保留名称和结构）

在

/src/assets/scss/main.scss

替换旧的导入：

/@import'../css/font awesome.min.css'

@import'../css/all.css'

在
/src/assets/scss/libs/_mixins.scss
注释掉
@mixin图标的字体系列
：
//字体系列：Fontsome

在
/src/assets/css/all.css
编辑
.far
和
@font-face
的字体大小，从
400
到
900
：
font-weight:900；}

最后，清理以前的4.7版本，尽管它没有这样做：

删除
/src/assets/font
文件夹

删除
/src/assets/css/font awesome.min.css

对于品牌图标，我必须将class
fab
添加到显示的图标

对于免费图标，我必须将class
fas
添加到显示的图标