通过 NPM 的 Font Awesome 5 Bundle答案

【问题标题】：Font Awesome 5 Bundle via NPM通过 NPM 的 Font Awesome 5 Bundle
【发布时间】：2018-05-22 13:22:38
【问题描述】：

我正在尝试通过 webpack 仅捆绑所需的 Font Awesome 5 图标，但图标不会在 DOM 中替换。

我已经从documentation添加了所有必需的包：

yarn add -D @fortawesome/fontawesome
yarn add -D @fortawesome/fontawesome-pro-solid
yarn add -D @fortawesome/fontawesome-pro-regular
yarn add -D @fortawesome/fontawesome-free-brands

包含以下自定义JS：

"use strict";

import fontawesome from '@fortawesome/fontawesome';
import faCheck from '@fortawesome/fontawesome-pro-regular/faCheck';

fontawesome.icon(faCheck);

function iconsDoneRendering () {
    console.log('Icons have rendered'); // No output in console
}

fontawesome.dom.i2svg({ 
    callback: iconsDoneRendering,
})

HTML 模板：

<head>
    <link rel="stylesheet" href="/css/app.css?v2.1.4"> <!-- contains fa-svg-with-js.css -->
</head>
<body>
    <ul class="fa-ul">
        <li><span class="fa-li"><i class="far fa-phone"></i></span>List item 1</li>
        <li><span class="fa-li"><i class="far fa-check"></i></span>List item 2</li>
    </ul>
    <script src="/js/app.js?v2.1.4"></script>
</body>

svg 路径在捆绑的 JS 文件中，但我不知道需要调用哪个方法。

以下JS代码解决问题（v5.0.2起）：

"use strict";

import fontawesome from '@fortawesome/fontawesome';
import faCheck from '@fortawesome/fontawesome-pro-regular/faCheck';
import faPhone from '@fortawesome/fontawesome-pro-regular/faPhone';

fontawesome.library.add(faCheck,faPhone);

【问题讨论】：

我也遇到了同样的问题，你解决了吗？
您是否像我一样看到将 CSS 添加到文档头部？
我看起来目前不可能：“我们需要进行一些更改以支持您所拥有的内容。目前这是我们的首要任务。”
我看到您更新了问题以包含答案（有点令人困惑，但还可以）。对于其他想知道为什么这不能替换他们的图标的人，也许您在将它们添加到库后还没有包含 fontawesome.dom.i2svg()。那是我缺少的步骤，没有很好地记录。
感谢您的反馈 - 我已恢复原始问题并添加了解决方案。在我的情况下，替换工作无需 i2svg 调用。

标签： npm webpack font-awesome font-awesome-5

【解决方案1】：

我知道这已经得到解答，但我想对完整的解决方案提供一些可见性，因为上述信息不包括如何执行 SVG 图标替换。

如果你像我一样通过 NPM 和 WebPack 加载 Font Awesome 5 以便在前端 HTML 中使用，你需要在你的包中包含的 JS 中执行类似的操作：

"use strict";

// Import FontAwesome: https://fontawesome.com/how-to-use/use-with-node-js
import fontawesome  from '@fortawesome/fontawesome';

// This enables using FontAwesome in CSS pseudo elements
// see: https://fontawesome.com/how-to-use/svg-with-js#pseudo-elements
fontawesome.config.searchPseudoElements = true;

// Icons should be imported individually to keep bundle size down
import faCheck from '@fortawesome/fontawesome-pro-regular/faCheck';
import faPhone from '@fortawesome/fontawesome-pro-solid/faPhone';
fontawesome.library.add(faCheck, faPhone);

// If really necessary, entire styles can be loaded instead of specifying individual icons
//import solid from '@fortawesome/fontawesome-pro-solid';
//fontawesome.library.add(solid);

// Execute SVG replacement
fontawesome.dom.i2svg();

最后一行是关键，您必须手动执行 SVG 图标替换。

【讨论】：

这已经过时了，fontawesome.com/how-to-use/svg-with-js#pseudo-elements 已经不存在了。
同意这现在有点过时了。可以在此处找到更新和全面的答案：stackoverflow.com/a/53580347/1462775

【解决方案2】：

我们刚刚发布了 5.0.2 版并更新了 @fortawesome NPM 包以修复一些与此相关的错误。确保在尝试其他任何操作之前升级。

上例中缺少的步骤是将图标添加到库中：

fontawesome.library.add(faCheck)

【讨论】：

感谢@rob-madole，这是完美的工作。感谢快速更新。
谢谢你，它工作得很好！我已经修复了上面的示例。

【解决方案3】：

尝试使用

fontawesome.library.add(faCheck);

而不是

fontawesome.icon(faCheck);

如果它不起作用，请使用您的 DOM 模板更新您的问题，看看它是如何在其中定义的。

【讨论】：