FontAwesome 不使用 SCSS 显示图标答案

【问题标题】：FontAwesome not showing icons using SCSSFontAwesome 不使用 SCSS 显示图标
【发布时间】：2020-12-02 18:23:22
【问题描述】：

我正在尝试将 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 字体是一个对象，它编译成 css 为url([object Object]) format("svg")。在 scss 文件中，它只是一条普通的行：url('#{$fa-font-path}/fa-light-300.svg#fontawesome') format('svg');。这是怎么回事？

【问题讨论】：

查看你编译的 CSS。进口是什么样子的？路径正确吗？
啊..它试图加载src: url(node_modules/@fortawesome/fontawesome-pro/webfonts/fa-light-300.eot);。那是行不通的。
另外，“fortawesome”是错字吗？我知道有一个 Fort Awesome 库，但不确定 font awesome 是如何适应它的。
不，FortAwesome 是包含 Font Awesome 字体的包。
正确。只需确保。向问题本身添加任何错误，而不是评论。

标签： css webpack sass font-awesome

【解决方案1】：

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

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

编辑：由于您要为样式导入文件，因此您必须提及文件的全名，即带有扩展名。

这对我有用。

【讨论】：

刚试过这个，没用。文件确实已加载，但我认为字体未正确加载。
如果你认为这是一个 webpack 问题，可以关注这个问题 => stackoverflow.com/questions/51059093/…

【解决方案2】：

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

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

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

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

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

【讨论】：