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 字体并将图标设置为内容，但它没有出现。

我究竟做错了什么？ 会不会是webpack的问题？

编辑：生成的 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 字体是 object，它编译为 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";

编辑：由于您正在导入 styles 的文件，因此您必须提及文件的全名，即扩展名。

这对我有用。

Answer 2

发现了问题。 svg url 在最终的 css 中编译为 Object：

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

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

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

当我删除这些行并将 svg 添加到默认文件加载器时，它起作用了。