Question

我已经使用npm命令npm i -D @ fortawesome / fontawesome-free安装了真棒字体。

然后我尝试通过2种方式将其导入到我的scss文件中。

@import'@ fortawesome / fontawesome-free / css / all'; 要么 @import'@ fortawesome / fontawesome-free / scss / fontawesome.scss';

在此之后，我只会得到空白方块而不是图标。我在我的scss文件中使用了很棒的字体，例如

.radioStyle input[type=radio] + label:before { 
content:"\f111"; 
font-family: "Font Awesome 5 Free"; 
color: $button-grey; 
font-size: 24px; 
padding-right: 8px; 
vertical-align:middle; }

我也在html中使用它，我也尝试用fas或fab代替class fa

，这些都不起作用。当我使用CDN时，一切都按预期工作。

有什么建议吗？

Answer 1

当我遇到这种情况时，是因为我忘记加载他们的 JavaScript 或将字体文件放在浏览器可访问的地方。另一个常见的原因是导入了字体 awesome 核心，但没有导入任何样式，例如solid。

SCSS/字体文档： https://fontawesome.com/how-to-use/on-the-web/using-with/sass#compile

导入示例

@import "variables";    
@import "/node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
@import "/node_modules/@fortawesome/fontawesome-free/scss/solid";

JavaScript 文档： https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers#next

使用NPM安装真棒字体时，真棒字体图标显示为空白方块

1 个答案: