Шрифт Awesome 5 Bundle через NPM

Я пытаюсь связать только требуемый шрифт Awesome 5 значков через webpack, но значки не заменяются в DOM.

  1. Я добавил все необходимые пакеты от документация:

    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
    
  2. следующий пользовательский 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,
    })
    
  3. шаблон 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);

3 ответов


мы только что выпустили версию 5.0.2 и обновили пакеты @fortawesome NPM, чтобы исправить несколько ошибок, связанных с этим. Убедитесь, что вы обновить прежде чем попробовать что-то другое.

недостающий шаг приведенного выше примера-добавить значок в библиотеку:

fontawesome.library.add(faCheck)

Я понимаю, что на это уже ответили, но я хотел бы дать некоторую видимость полному решению, так как информация выше не включает в себя, как выполнить замену значка SVG.

Если вы загружаете шрифт Awesome 5 через NPM & WebPack для использования в интерфейсном 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.library.add(faCheck);

вместо

fontawesome.icon(faCheck);

если он не работает, обновите свой вопрос с помощью шаблона DOM, чтобы узнать, как он определен там.