एनपीएम

के माध्यम से फ़ॉन्ट विस्मयकारी 5 बंडल मैं वेबपैक के माध्यम से केवल आवश्यक फ़ॉन्ट विस्मयकारी 5 आइकन बंडल करने की कोशिश कर रहा हूं, लेकिन आइकन को DOM में नहीं बदला गया है।एनपीएम

मैं 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

निम्न कस्टम जे एस शामिल है:

"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 टेम्पलेट:

<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 पथ बंडल जे एस फ़ाइल के अंदर है, लेकिन मैं समझ नहीं कि कौन सी विधि कहा जाता है की जरूरत है।

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

स्रोत

2017-12-08 Daniel Potthast

मैं एक ही समस्या आ रही है, तो आप इसे हल करने में कामयाब रहे है? – benembery

क्या आप दस्तावेज़ के सिर में सीएसएस को जोड़ा जा रहा है जैसा कि मैं हूं? – benembery

मुझे लगता है कि वर्तमान में यह संभव नहीं है: "आपके पास जो कुछ है, उसका समर्थन करने के लिए हमें कुछ बदलाव करने की आवश्यकता होगी। वर्तमान में यह हमारे लिए एक उच्च प्राथमिकता है।" –

हम सिर्फ संस्करण 5.0.2 जारी किया है और @fortawesome NPM संकुल अद्यतन इस से संबंधित कुछ कीड़े को ठीक करने के लिए। सुनिश्चित करें कि आप कुछ और करने का प्रयास करने से पहले अपग्रेड करें।

ऊपर के उदाहरण की याद आ रही है कदम पुस्तकालय के लिए आइकन जोड़ने के लिए है:

fontawesome.library.add(faCheck)

स्रोत

2017-12-20 17:51:30

धन्यवाद @ rob-madole यह पूरी तरह से काम कर रहा है। मैं त्वरित अद्यतन की सराहना करता हूं। – benembery

धन्यवाद, यह पूरी तरह से काम करता है! मैंने उपरोक्त नमूना तय कर लिया है। –

कोशिश

fontawesome.library.add(faCheck);

fontawesome.icon(faCheck);

के बजाय

उपयोग करने के लिए यदि ऐसा है:

निम्नलिखित जे एस कोड समस्या (के बाद से v5.0.2) को हल करती है काम नहीं करते, कृपया अपने प्रश्न को अपने डीओएम टेम्पलेट के साथ अपडेट करें, यह देखने के लिए कि इसमें कैसे परिभाषित किया गया है।

स्रोत

2017-12-08 11:06:57

यह या तो काम नहीं करता है। आपकी प्रतिक्रिया के लिए धन्यवाद, मैंने प्रश्न अपडेट किया है। –

ने भी यह कोशिश की। लेकिन काम नहीं किया। कोई आइकन नहीं दिख रहा है .. तो समस्या कहां है? – Opa114

@ ओपा 114 मेरे पास आज रॉब पर फ़ॉन्ट विस्मयकारी से एक ईमेल है, इसका इरादा इस तरह से नहीं किया जा रहा था, लेकिन वे अभी इस मुद्दे पर कड़ी मेहनत कर रहे हैं। – benembery

मैं यह पहले से ही उत्तर दिया जाता है एहसास है, लेकिन मैं जानकारी के बाद से पूर्ण समाधान के लिए दृश्यता करना चाहते हैं उपरोक्त में एसवीजी आइकन प्रतिस्थापन को निष्पादित करने का तरीका शामिल नहीं है।

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

आप सामने के अंत एचटीएमएल में उपयोग के लिए NPM & webpack के माध्यम से फ़ॉन्ट बहुत बढ़िया 5 लोड कर रहे हैं की तरह मैं कर रहा हूँ, आप अपने जे एस में यह है कि आपके बंडल में शामिल है की तरह कुछ करने की आवश्यकता होगी

वह अंतिम पंक्ति कुंजी है, आपको मैन्युअल रूप से एसवीजी आइकन प्रतिस्थापन निष्पादित करना होगा।

स्रोत

2018-01-18 18:52:34 cr0ybot

एनपीएम

उत्तर

संबंधित मुद्दे