Question

我试图通过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);

Answer 1

我意识到这已经得到了回答，但我想对整个解决方案给予一些了解，因为上述信息不包括如何执行SVG图标替换。

如果您正在通过NPM＆amp ;;加载Font Awesome 5 WebPack用于前端HTML，就像我一样，你需要在你的包中包含这样的东西：

"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图标替换。

Answer 2

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

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

fontawesome.library.add(faCheck)

Answer 3

尝试使用

fontawesome.library.add(faCheck);

而不是

fontawesome.icon(faCheck);

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

字体真棒5捆绑通过NPM

3 个答案: