Zestaw Font Awesome 5 za pośrednictwem NPM

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

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

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, 
})

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

Źródło

2017-12-08 Daniel Potthast

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

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

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

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)

Źródło

2017-12-20 17:51:30

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

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

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.

Źródło

2017-12-08 11:06:57

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

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

@ 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

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.

Źródło

2018-01-18 18:52:34 cr0ybot

Zestaw Font Awesome 5 za pośrednictwem NPM

Odpowiedz

Powiązane problemy