css - 为什么 Font Awesome 显示为正方形而不是图标？

Question

我正在尝试在我的元素中实现 Sass。我已经使用 NPM 导入了 font-awesome，并且有我想要导入 Font Awesome 的主 style.scss 文件。我通读了有关 Sass 入门的 font-awesome 文档。我有:

1. 将字体 Awesome 目录复制到我的元素中。

2. 打开“font-awesome/scss/_variables.scss”并编辑 $fa-font-path 变量以指向我的字体目录。

   $fa-font-path: "project/node_modules/font-awesome/fonts" !default;
   

3. 我将 font-awesome.scss 文件导入到我的主 style.scss 文件中，并尝试实现图标的使用，但图标最终呈现为空白方 block 。

   /*How I Import At The Top Of My Page*/
   @import "project/node_modules/font-awesome/scss/font-awesome";
   
   /*How I Try To Implement*/
   p:first-child:before{
       content: $fa-var-mobile-phone
    }  
   

根据我所读到的内容，我似乎遇到了某种映射问题，但对我来说一切看起来都是正确的。

Answer 1

从您提供的信息中我可以看出。您需要设置font-family，这应该是文件而不仅仅是路径。

p:first-child:before{
    content: $fa-var-mobile-phone;
    font-family: 'Your font-awesome';
}