时间戳

首页 > 解决方案 > Font Awesome Webpack Import 不呈现图标

npm - Font Awesome Webpack Import 不呈现图标

问题描述

我尝试按照 Font Awesome 上的文档进行操作。我有专业版并为其配置了 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-->

它似乎对图标没有任何作用，而且我没有任何编译错误。我究竟做错了什么？

标签： npmwebpackfont-awesome

解决方案

我发现加载 svg-core 是问题所在。预期的行为是自动替换标签。由于我正在加载 svg-core autoReplaceSvg 被禁用。

  • 使用 @fortawesome/fontawesome-svg-core 包默认禁用 autoReplaceSvg 和 observeMutations。

Font Awesome API -> 配置

推荐阅读