为什么 Font Awesome 显示的是正方形而不是图标？答案

【问题标题】：Why is Font Awesome showing a square instead of an icon?为什么 Font Awesome 显示的是正方形而不是图标？
【发布时间】：2018-07-07 04:01:12
【问题描述】：

我正在尝试在我的项目中实现 Sass。我已经使用 NPM 导入了 font-awesome，并有我想要导入 Font Awesome 的主要 style.scss 文件。我通读了有关开始使用 Sass 的 font-awesome 文档。我有：

将字体 Awesome 目录复制到我的项目中。
打开 'font-awesome/scss/_variables.scss' 并编辑 $fa-font-path 变量以指向我的字体目录。
```
$fa-font-path: "project/node_modules/font-awesome/fonts" !default;
```

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

/*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
 }

根据我的阅读，我似乎有某种映射问题，但对我来说一切都正确。

【问题讨论】：

你使用什么捆绑工具？
什么意思
font-awesome 需要一些 otf | ttf | eot | svg | woff(2) 文件检查它们是否已经可以加载！！！

标签： css sass font-awesome

【解决方案1】：

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

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

【讨论】：

另外，如果您使用的是免费版本和设置功能（您不是但可能会帮助像我这样的人......不得不努力通过......它会将字体粗细重置为正常（仅限专业版）来解决这个问题（在@extend .fas 添加font-weight:900 之后）当我终于找到它时它帮助了我。

【解决方案2】：

我遇到了同样的问题，解决方法是关注official docs。

在我们的style.scss（或其他情况下的 app.scss）中添加以下内容：

@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import "~@fortawesome/fontawesome-free/scss/solid.scss";
@import "~@fortawesome/fontawesome-free/scss/brands.scss";

将字体路径添加到您的_variables.scss:

$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";

请注意，我使用 npm 进行包管理，并使用以下方式安装了 fontawesome：

npm i @fortawesome/fontawesome-free

【讨论】：