css - 升级 Gatsby react 元素中的 Font Awesome 图标，新图标不起作用

Question

我正在使用 gatsby html5up 模板开发一个 React 元素。我正在将 font Awesome 图标从 4.7 升级到 5.12。 4.7 图标可以正常工作，因此我的新文件位置基于旧文件位置。

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

在我的 main.scss 中:

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

然后在我的 src/assets/css 文件夹中，我添加了 all.css 文件，该文件与 4.7 font-awesome.min.css 所在的位置相同。

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

我的元素构建没有错误，但图标没有显示。我做错了什么？

Answer 1

我想通了并发布在这里，以防其他人遇到同样的问题。
该元素的依赖项:

    "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-forty-v2

采取的步骤:

从 fontawesome 网站，下载 all.css文件并放置在 /src/assets/css文件夹。下载webfonts文件夹并放置在 /src/assets文件夹( all.css 按名称引用 webfonts 文件夹，必须保留名称和结构)

在 /src/assets/scss/main.scss替换旧的导入:
//@import '../css/font-awesome.min.css';
@import '../css/all.css';

在 /src/assets/scss/libs/_mixins.scss注释掉 @mixin icon 的 font-family : //font-family: FontAwesome;

在 /src/assets/css/all.css编辑字体粗细 400至900对于 .far和@font-face : font-weight: 900; }

最后，清理以前的 4.7 版本，尽管它在不这样做的情况下也能工作:

删除/src/assets/fonts文件夹

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

对于品牌图标，我必须添加类 fab到显示的图标<a href="#" className="icon alt fab fa-linkedin">
对于免费图标，我必须添加类 fas到显示的图标<span className="icon alt fas fa-phone"></span>