केवल उपयोग की जाने वाली कक्षाओं के लिए फ़ॉन्ट का अनुकूलन करें

Question 1

मैं फ़ॉन्ट विस्मयकारी Sass फ़ाइल https://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.sass का उपयोग करके इसे _font-awesome.sass बनाता हूं ताकि मैं @importअपने सास प्रोजेक्ट में कर सकूं । मैं भी Sss को Css में बदलने के लिए http://middlemanapp.com/ का उपयोग कर रहा हूं । प्रशन:

क्या मेरे परिवर्तित .css में केवल उपयोग की गई आइकन कक्षाएं लाने का कोई तरीका है ? क्योंकि अभी इसने _font-awesome.sass से सभी कक्षाएं ली हैं
बोनस: क्या यह किसी भी तरह इस्तेमाल किए गए आइकन वर्गों के साथ फोंट को फिर से इकट्ठा करना संभव है ताकि इसे उत्पादन उपयोग पर छोटा किया जा सके?

अगर मुझे ऊपर # 1 पर कुछ सुझाव मिल सकते हैं, तो यह काफी भयानक होगा।

धन्यवाद।

Question 2

सैस को इस बात का कोई अंदाजा नहीं है कि आप वास्तव में किन कक्षाओं का उपयोग कर रहे हैं। यह कुछ ऐसा है जिसे आपको मैन्युअल रूप से स्वयं ट्रिम करना होगा। प्रदान की गई .scss फ़ाइल को खोलें और ऐसी किसी भी चीज़ को हैक करें जिसकी आपको आवश्यकता नहीं है।

अनावश्यक ग्लिफ़ को खत्म करने के लिए फ़ॉन्ट फ़ाइल को संपादित करना ऐसा करने के लिए एक 3 पार्टी एप्लिकेशन की आवश्यकता होती है और इस प्रश्न के दायरे से परे है।

Fontello एक ऑनलाइन वेब सेवा है जो आपके लिए यह सब कर सकती है। यह आपको अपनी परियोजना के लिए एकदम सही फ़ॉन्ट फ़ाइल बनाने के लिए कई आइकन फ़ॉन्ट संग्रहों के बीच मिश्रण और मिलान करने देता है। अनुकूलित फ़ॉन्ट फ़ाइल के अलावा, यह आपके लिए पहले से उत्पन्न शैलियों वाली कई .css फ़ाइलें प्रदान करता है (.scss के लिए एक्सटेंशन को बदलने से आप उन्हें अपने मौजूदा Sass प्रोजेक्ट में आयात कर सकेंगे)।

Question 3

fontello बहुत अच्छा है, लेकिन IcoMoon और भी भयानक है।

Question 4

अब आप उत्पादन के उपयोग के लिए फ़ॉन्ट-भयानक से आइकन को हटा सकते हैं। अब कहा जाता है एक अधिकारी subsetting उपकरण है icnfnt जो आप ले सकते हैं और सिर्फ माउस आप फ़ॉन्ट-भयानक (v3.0.2) के वर्तमान संस्करण से की जरूरत पैकेज करने की अनुमति देता है,।

कस्टम डाउनलोड में सभी CSS, LESS, SCSS और SASS कोड भी शामिल हैं!

Question 5

मैं LESS का उपयोग करता हूं और SASS का नहीं, इसलिए आपको अपने कार्यान्वयन को अनुकूलित करना पड़ सकता है।

वातावरण:

फ़ॉन्ट विस्मयकारी 4.5.0 (वर्तमान संस्करण)
उबंटू 14.04 एलटीएस
दे घुमा के

यूनिकोड वर्ण संख्याओं की सूची बनाने के लिए इसका उपयोग करें जिनकी आपको आवश्यकता है:

fa_icons="globe|vimeo|youtube|facebook|twitter|google-plus"
for code in $(egrep "^@fa-var-($fa_icons):" less/font-awesome/variables.less | cut -d ':' -f 2 | sed -e 's/^ "\\//' | sed -e 's/";/,/' | sort ); do echo -n $code; done

फिर आप इसका उपयोग विशेषज्ञ मोड में FontSquirrel के साथ करते हैं, जहाँ आप कस्टम सब्मिटिंग का चयन करते हैं: http://www.fontsquirrel.com/tools/webfont-generator

यूनिकोड श्रेणी में ऊपर से अल्पविराम से अलग किए गए मान दर्ज करें।

फिर CSS से अनावश्यक सामान हटाने के लिए:

egrep "@fa-var-($fa_icons);" less/font-awesome/icons.less

आपको less/font-awesome/icons.lessफ़ाइल में grep से आउटपुट को खोलना और पेस्ट करना होगा।

Question 6

खैर, चयनकर्ताओं को %आधार बनाने के लिए सैस को थोड़ा झटका दिया जा सकता है, इसलिए वे केवल विस्तार योग्य हैं। एक बार ऐसा करने के बाद, वर्गों को वांछित आइकनों से मिलान करने के लिए बनाया जा सकता है, और फिर @extendफ़ॉन्ट-भयानक कक्षाएं कर सकते हैं।

व्यक्तिगत रूप से, मैं ऐसा करता हूं, और वास्तव में मार्कअप में कक्षाओं का उपयोग नहीं करता हूं, और बस @extendइन तत्वों के साथ चयनकर्ताओं को संबंधित तत्वों और उनके साथ उपयोग करता हूं।

उदाहरण:

// _icons.scss
%#{$fa-css-prefix}-glass:before { content: $fa-var-glass; }
...

// _core.scss
%#{$fa-css-prefix} {
    ...
}

फिर अपने scss में

a.search {
    @extend %fa;
    @extend %fa-search;
}

वेटिला।

Question 7

Fontastic ने मेरे लिए काम किया (यह फ़ॉन्ट विस्मयकारी गीथूब पेज पर सूचीबद्ध था )। उन ग्लिफ़ों का चयन करें जिनकी आपको आवश्यकता है और उन्हें एक नए कस्टम फ़ॉन्ट के रूप में डाउनलोड करें। उत्कृष्ट उपकरण।

Question 8

इकोनमून ने मेरे लिए काम किया। मैंने इसे फ़ॉन्ट-भयानक से svg फ़ाइल आयात करके उपयोग किया, इस प्रकार मुझे यह सुनिश्चित करना है कि मुझे उन आइकन मिलें जो मुझे चाहिए और न कि उनकी साइट पर उपलब्ध हैं। इसके अलावा इस लिंक ने मुझे नए आइकन https://tonyxu.io/posts/2018/use-icomoon-to-reduce-fontawesome-size/ के एकीकरण में मदद की