Font Awesome 5 Bundle via NPM

Webpack üzerinden sadece gerekli Font Awesome 5 ikonlarını paketlemeye çalışıyorum, ancak simgeler DOM'de değiştirilmiyor.Font Awesome 5 Bundle via NPM

ben documentation gerekli tüm paketleri ekledik:

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

JS dahildir aşağıdaki özel:

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

HTML şablonu:

<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 yolu paketlenmiş JS dosyasının içinde, ancak hangi yöntemin çağrılması gerektiğini anlayamıyorum. Eğer varsa

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

kaynak

2017-12-08 Daniel Potthast

Aynı sorunu yaşıyorum, çözmeyi başardınız mı? – benembery

Belgenin başlığına eklenmiş olan CSS'yi olduğum gibi mi görüyorsunuz? – benembery

Şu an mümkün olmamış gibi görünüyordum: "Orada olanı desteklemek için bazı değişiklikler yapmamız gerekecek. Şu anda bizim için yüksek bir öncelik." –

Yalnızca 5.0.2 sürümünü yayımladık ve bununla ilgili birkaç hatayı düzeltmek için @fortawesome NPM paketlerini güncelledik. Başka bir şey denemeden önce yükseltdiğinizden emin olun.

Yukarıdaki örnekte eksik adımı kütüphanesine simge eklemek için: Ben bu zaten cevap olduğunu fark

fontawesome.library.add(faCheck)

kaynak

2017-12-20 17:51:30

Teşekkürler @ rob-madole bu mükemmel çalışıyor. Hızlı güncellemeyi takdir ediyorum. – benembery

Teşekkür ederim, mükemmel çalışıyor! Yukarıdaki örneği tamir ettim. –

deneyin yerine

fontawesome.icon(faCheck);

ait

fontawesome.library.add(faCheck);

kullanmak:

Aşağıdaki JS kod sorunu (çünkü v5.0.2) çözer çalışmaz, lütfen sorunuzun DOM şablonunuzla güncellenmesi, orada nasıl tanımlandığını görmek için.

kaynak

2017-12-08 11:06:57

Bu da çalışmıyor. Görüşleriniz için teşekkürler, sorunu güncelledim. –

da bunu denedi. Ama işe yaramadı. Simgeler gösterilmiyor .. sorun nerede? – Opa114

@ Opa114 Bugün Yazı Harika'da bir e-posta aldım, bu şekilde kullanılmasını istemediler, ancak “şu anda bu konu üzerinde yoğun bir şekilde çalışıyorlar”. – benembery

ama bilgi beri tam çözümü için bazı görüş vermek istiyoruz Yukarıda SVG simgesi değiştirmeyi nasıl yürüteceğiniz dahil değildir.

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

: ben gibi ön uç HTML'de kullanılmak üzere NPM & WebPack aracılığıyla Yazı Müthiş 5 yüklüyorsanız

, kendi pakette yer alması için JS böyle bir şey yapmak gerekecektir

Son satırın anahtarı, SVG simgesi değiştirmeyi elle çalıştırmanız gerekir.

kaynak

2018-01-18 18:52:34 cr0ybot

cevap

İlgili konular