小编Dan*_*ast的帖子

字体真棒5捆绑通过NPM

我试图通过webpack仅捆绑所需的Font Awesome 5图标,但DOM中的图标不会被替换.

我已从文档中添加了所有必需的包:

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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> …

Run Code Online (Sandbox Code Playgroud)

npm font-awesome webpack font-awesome-5

Dan*_*ast

2018 01-22

21
推荐指数

2
解决办法

2万
查看次数