2017-12-08 36 views
11

Próbuję połączyć tylko wymagane ikony Font Awesome 5 za pośrednictwem pakietu internetowego, ale ikony nie są zastępowane w DOM.Zestaw Font Awesome 5 za pośrednictwem NPM

  1. Dodałem wszystkie wymagane pakiety z 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. Poniższy zwyczaj JS jest wliczone:

    "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. Szablon 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> 
    

Ścieżka svg znajduje się wewnątrz dołączonego pliku JS, ale nie mogę określić, która metoda musi zostać wywołana.


Poniższy kod JS rozwiązuje problem (od 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); 
+0

Mam ten sam problem, czy udało Ci się go rozwiązać? – benembery

+0

Czy widzisz, że CSS jest dodawany do nagłówka dokumentu, tak jak ja? – benembery

+0

Wygląda na to, że obecnie nie jest to możliwe: "Będziemy musieli wprowadzić pewne zmiany, aby wesprzeć to, co tam masz, a obecnie jest to dla nas priorytet". –

Odpowiedz

4

Właśnie wydaliśmy wersję 5.0.2 i zaktualizowaliśmy @fortawesome pakiety NPM, aby naprawić kilka błędów związanych z tym. Upewnij się, że dokonałeś aktualizacji zanim spróbujesz czegoś innego.

Brakujące krok od powyższego przykładu jest dodać ikonę do biblioteki:

fontawesome.library.add(faCheck) 
+0

Dzięki @ rob-madole to działa idealnie. Doceniam szybką aktualizację. – benembery

+0

Dziękuję, działa idealnie! Naprawiłem próbkę powyżej. –

0

spróbuje użyć

fontawesome.library.add(faCheck); 

zamiast

fontawesome.icon(faCheck); 

Jeśli to robi nie działa, zaktualizuj swoje pytanie za pomocą szablonu DOM, aby zobaczyć, jak to jest zdefiniowane.

+0

To również nie działa. Dziękuję za Twoją opinię, zaktualizowałem to pytanie. –

+0

też tego próbowałem. Ale nie działa. Żadne ikony nie są wyświetlane ... więc gdzie jest problem? – Opa114

+1

@ Opa114 Otrzymałem wiadomość e-mail od Roba z Font Awesome dzisiaj, nie zamierzali używać tego w ten sposób, ale "pracują teraz nad tym problemem". – benembery

6

Zdaję sobie sprawę, to jest już odpowiedź, ale chciałbym, aby dać pewną widoczność do pełnego rozwiązania, ponieważ informacje powyżej nie obejmuje sposobu wykonywania wymiany ikon SVG.

Jeśli ładujesz Font Awesome 5 przez KMP & WebPack do stosowania w frontonu HTML jak ja, trzeba będzie zrobić coś takiego w JS, które jest zawarte w pakiecie:

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

Ta ostatnia linia jest kluczem, musisz ręcznie dokonać wymiany ikon SVG.

Powiązane problemy