通过NPM的字体5包_Npm_Webpack_Font Awesome_Font Awesome 5

通过NPM的字体5包

npm webpack

通过NPM的字体5包,npm,webpack,font-awesome,font-awesome-5,Npm,Webpack,Font Awesome,Font Awesome 5,我试图通过webpack捆绑只需要5个图标，但这些图标在DOM中不会被替换我已从以下位置添加了所有必需的包：包括以下自定义JS： "use strict"; import fontawesome from '@fortawesome/fontawesome'; import faCheck from '@fortawesome/fontawesome-pro-regular/faCheck'; fontawesome.icon(faCheck); function iconsDone

我试图通过webpack捆绑只需要5个图标，但这些图标在DOM中不会被替换

我已从以下位置添加了所有必需的包：

包括以下自定义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>

尝试使用

fontawesome.library.add(faCheck);

而不是

fontawesome.icon(faCheck);

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

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

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

fontawesome.library.add(faCheck)

我意识到这一点已经得到了回答，但我想让大家了解一下完整的解决方案，因为上面的信息不包括如何执行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图标替换。

我也遇到了同样的问题，您解决了吗？您是否看到CSS像我一样添加到文档的头部？我看起来目前不可能：“我们需要进行一些更改，以支持您在那里拥有的功能。我看到你更新了这个问题以包含答案（有点混乱，但还行）。如果有人想知道为什么这个问题没有取代他们的图标，也许你没有包括

fontawesome.dom.i2svg（）

在将它们添加到库中后。这是我缺少的步骤，没有很好的文档记录。感谢您的反馈–我已经回复了原始问题并添加了解决方案。在我的情况下，替代品在没有i2svg调用的情况下工作。感谢@rob madole这非常有效。我感谢您的快速更新。谢谢，它工作正常很好！我已经修复了上面的示例。这是过时的，不再存在。同意这现在有点过时。可以在此处找到更为最新和彻底的答案：

fontawesome.library.add(faCheck)

"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();