Npm 字体：网页导入不呈现图标

我已经试着按照关于字体真棒的文档进行操作。我有专业版，并为其配置了NPM。我正在使用webpack进行编译，但在实际渲染时遇到了问题。我做错了什么

这是我的app.js

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/pro-solid-svg-icons'
import { far } from '@fortawesome/pro-regular-svg-icons'
import { fal } from '@fortawesome/pro-light-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

library.add(fas, far, fal, fab);

我刚刚将以下FA图标转储到我的索引文件中

<i class="fas fa-question-circle"></i> <!-- solid style of the question circle icon -->
<i class="far fa-question-circle"></i> <!-- regular style of the question circle icon -->
<i class="fal fa-question-circle"></i> <!-- light style of the question circle icon -->

<i class="fab fa-facebook"></i>        <!-- facebook brand icon-->
<i class="fab fa-facebook-f"></i>      <!-- facebook "f" brand icon-->

---

它似乎与图标没有任何关系，我也没有任何编译错误。我做错了什么？

无论如何，我都不是一个网页专家，但为了让Font Awest正常工作，除了简单的导入，还有一些配置

现在，fa5可能已经改变了这一点，但我希望这种方法仍然有效

这篇文章很好地总结了这一点，并且与我当前的配置非常相似：

文章有以下内容（以防链接失效）：

您需要一些必备项目：

npm install webpack file-loader css-loader sass-loader node-sass 

--拯救开发人员

还有FA，你可能已经有了：

npm install font-awesome --save

**注意：您的路径可能与我的不同**

在我的Webpack模块规则中，我设置将FA资产放入字体目录：

module: {
    rules: [{
            test: /\.(eot|ttf|otf)(\?.*)?$/,
            loader: 'file-loader',
            options: {
                limit: 10000,
                name: '[name].[ext]',
                outputPath: '/fonts/',    // where the fonts will go
                publicPath: '/assets'       // override the default path
            }
        }]

设置好所有配置后，需要将FA导入主样式表：

$fa-font-path: "~font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';

---

然后，当您运行Webpack构建时，您应该会看到资产被拉入其中。

我发现加载svg核心是一个问题。预期的行为是自动替换标记。因为我正在加载svg，所以禁用了核心自动替换svg

• 默认情况下，使用@fortawesome/fontawesome svg核心包将禁用自动替换svg和ObserveMutation

---

您是将此应用于React还是VueJS？它是laravel，因此我使用laravel mix并将使用VueI如果您将使用vue，那么我建议您使用他们的vue字体组件-