React中SCSS引入FontAwesome后Unicode图标不显示怎么解决？

解决方案 #

你遇到的图标显示方块的核心原因是SCSS引入远程CDN资源时，React构建工具的资源处理逻辑导致FontAwesome字体文件未被正确加载，或加载顺序晚于业务样式。推荐用本地依赖安装的方式解决，稳定性更高：

1. 首先安装FontAwesome官方依赖包

npm install @fortawesome/fontawesome-free
# 用yarn的话执行 yarn add @fortawesome/fontawesome-free

2. 在你的全局style.scss文件顶部引入本地FontAwesome样式，删除原来的远程CDN @import语句

// CRA等标准React项目可直接使用如下路径，其他构建工具可根据node_modules位置调整相对路径
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/solid.scss";
// 若需使用Regular/品牌类图标，额外引入对应文件即可
// @import "~@fortawesome/fontawesome-free/scss/regular.scss";
// @import "~@fortawesome/fontawesome-free/scss/brands.scss";

3. 你现有伪元素的样式代码无需修改，保持如下配置即可：

• solid类型图标对应font-weight: 900
• regular类型图标对应font-weight: 400
• 字体族声明font-family: "Font Awesome 5 Free"保持不变

可选排查项 #

如果调整后依然显示方块，可检查两个配置：

• 确保FontAwesome的样式引入顺序在你写的ul.ks-cboxtags相关样式之前，保证字体规则先于业务样式注册
• 确认你使用的Unicode编码和引入的图标类型匹配，避免用solid的编码对应未引入的regular字体包

内容的提问来源于stack exchange，提问作者Jartyyy