FontAwesome不显示图标使用SCSS

Question

我正试图将Font Awesome加载到我的项目中，但由于某些原因，图标显示为空白。我加载图标的方式如下：

$fa-font-path: '~@fortawesome/fontawesome-pro/webfonts';
@import "~@fortawesome/fontawesome-pro/scss/fontawesome";
@import "~@fortawesome/fontawesome-pro/scss/light";
@import "~@fortawesome/fontawesome-pro/scss/brands";

当我使用图标时，例如<i class="fal fa-chevron-circle-right"></i>，它会获得Font Awesome 5 Pro字体，并将图标设置为内容，但它不会出现。

我做错了什么？这可能是网络包的问题吗？

编辑：生成的css具有以下内容：

/*!
* Font Awesome Pro 5.15.1 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license (Commercial License)
*/
@font-face {
font-family: "Font Awesome 5 Pro";
font-style: normal;
font-weight: 300;
font-display: block;
src: url(node_modules/@fortawesome/fontawesome-pro/webfonts/fa-light-300.eot);
src: url(node_modules/@fortawesome/fontawesome-pro/webfonts/fa-light-300.eot?#iefix) format("embedded-opentype"), url(node_modules/@fortawesome/fontawesome-pro/webfonts/fa-light-300.woff2) format("woff2"), url(node_modules/@fortawesome/fontawesome-pro/webfonts/fa-light-300.woff) format("woff"), url(node_modules/@fortawesome/fontawesome-pro/webfonts/fa-light-300.ttf) format("truetype"), url([object Object]) format("svg");
}
.fal {
font-family: "Font Awesome 5 Pro";
font-weight: 300;
}
/*!
* Font Awesome Pro 5.15.1 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license (Commercial License)
*/
@font-face {
font-family: "Font Awesome 5 Brands";
font-style: normal;
font-weight: 400;
font-display: block;
src: url(node_modules/@fortawesome/fontawesome-pro/webfonts/fa-brands-400.eot);
src: url(node_modules/@fortawesome/fontawesome-pro/webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"), url(node_modules/@fortawesome/fontawesome-pro/webfonts/fa-brands-400.woff2) format("woff2"), url(node_modules/@fortawesome/fontawesome-pro/webfonts/fa-brands-400.woff) format("woff"), url(node_modules/@fortawesome/fontawesome-pro/webfonts/fa-brands-400.ttf) format("truetype"), url([object Object]) format("svg");
}
.fab {
font-family: "Font Awesome 5 Brands";
font-weight: 400;
}

因此，由于某种原因，svg字体是一个对象，它编译为css中的url([object Object]) format("svg")。在scss文件中，它只是一个普通的行：url('#{$fa-font-path}/fa-light-300.svg#fontawesome') format('svg');。这是怎么回事？

Answer 1

您是否尝试过将".scss"放在路径中样式行的末尾，如下所示：

@import "~@fortawesome/fontawesome-pro/scss/light.scss";
@import "~@fortawesome/fontawesome-pro/scss/brands.scss";

编辑：由于您要导入样式的文件，因此必须提及文件的完整名称，即扩展名。

这对我有效。

Answer 2

发现问题。svg-url在最后的css中被编译为Object：

url([object Object]) format("svg")

在我的webpack.config.js中，我对svg文件有以下规则：

{
test: /.svg$/,
use: [
'babel-loader',
'vue-svg-loader',
],
},

当我删除这些行并将svg添加到默认文件加载程序时，它就工作了。