我正在使用 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 中。
我的元素构建没有错误,但图标没有显示。我做错了什么?
最佳答案
我想通了并发布在这里,以防其他人遇到同样的问题。
该元素的依赖项:
"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>
关于css - 升级 Gatsby react 元素中的 Font Awesome 图标,新图标不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59814743/