Font Awesome 5 Bundle via NPM

Je suis en train d'ensemble de Polices de caractères Génial 5 icônes via webpack, mais les icônes ne sont pas remplacés dans les DOM.

  1. J'ai ajouté tous les paquets nécessaires à partir de la la 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
  2. Personnalisés suivants JS est inclus: 
    "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. Le gabarit HTML: 
    <head>
    <link  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>

Le svg chemin est à l'intérieur de la groupés fichier JS, mais je ne peux pas comprendre la méthode doit être appelée.

Suivants du code JS résout le problème (depuis 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);

source d'informationauteur Daniel Potthast

  1. 6

    Nous venons de sortir la version 5.0.2 et mise à jour de la @fortawesome MNP paquets pour corriger quelques bugs liés à cela. Assurez-vous de mettre à niveau avant d'essayer quoi que ce soit d'autre.

    L'étape manquante de l'exemple ci-dessus pour ajouter l'icône de la bibliothèque:

    fontawesome.library.add(faCheck)
  2. 10

    Je réalise que j'ai déjà répondu, mais je aimerais donner une certaine visibilité à la solution complète depuis les informations ci-dessus ne comprend pas comment faire pour exécuter le SVG icône de remplacement.

    Si vous êtes en train de charger la Police Impressionnant 5 via NPM & WebPack pour une utilisation en front-end HTML comme je suis, vous aurez besoin de faire quelque chose comme ceci dans votre JS inclus dans votre forfait:

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

    Que la dernière ligne est la clé, vous devez exécuter SVG icône de remplacement de la main.

  3. 1

    Essayez d'utiliser

    fontawesome.library.add(faCheck);

    au lieu de

    fontawesome.icon(faCheck);

    Si cela ne fonctionne pas, veuillez mettre à jour votre question avec votre modèle DOM, pour voir comment il est défini dans la.