2017-12-08 101 views
11

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

  1. 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 
    
  2. 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, 
    }) 
    
  3. 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); 
+0

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

+0

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

+0

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

cevap

4

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) 
+0

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

+0

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

0

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.

+0

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

+0

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

+1

@ 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

6

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.

İlgili konular