आइकन फ़ॉन्ट्स: वे कैसे काम करते हैं?

Question

मैं समझता हूं कि आइकन फोंट केवल फोंट हैं और आप आइकन को केवल उनके क्लासनाम को कॉल करके प्राप्त कर सकते हैं, लेकिन आइकन फोंट कैसे काम करते हैं?

मैंने क्रोम में लोड किए गए संबंधित आइकन फ़ॉन्ट संसाधनों की जाँच करने की कोशिश की है कि आइकन फोंट आइकन (सामान्य फोंट की तुलना में) कैसे प्रदर्शित होते हैं, लेकिन मैं यह पता लगाने में सक्षम नहीं हूं कि यह कैसे होता है।

मैं संसाधनों को खोजने में असफल भी रहा हूँ कि यह "आइकन फ़ॉन्ट तकनीक" कैसे किया जाता है, भले ही आइकन फ़ॉन्ट उपलब्ध हैं । संसाधनों के भार भी हैं जो दिखाते हैं कि आइकन फोंट को कैसे एकीकृत किया जा सकता है , लेकिन कोई भी यह साझा करने या लिखने के बारे में नहीं लगता है कि यह कैसे किया जाता है!

Answer 1

Glyphicons हैं छवियों और नहीं एक फ़ॉन्ट। सभी चिह्न एक स्प्राइट छवि (व्यक्तिगत छवियों के रूप में भी उपलब्ध हैं) के भीतर पाए जाते हैं और उन्हें backround-imageएस के रूप में तत्वों में जोड़ा जाता है :

वास्तविक फ़ॉन्ट प्रतीक ( FontAwesome , उदाहरण के लिए) है एक विशिष्ट फ़ॉन्ट और का उपयोग करें डाउनलोड करने के शामिल contentसंपत्ति, उदाहरण के लिए:

@font-face {
    ...
    src: url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
         url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
         url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
    ...
}

.icon-beer:before {
    content: "\f0fc";
}

जैसा कि पुराने ब्राउज़रों में contentसंपत्ति का समर्थन नहीं किया जाता है, ये छवियों का उपयोग भी करते हैं ।

यहाँ एक फ़ॉन्ट के रूप में उपयोग में पूरी तरह से कच्चे FontAwesome का एक उदाहरण है, मोड़ (may - आप इसे देखने में सक्षम नहीं हो सकते हैं!) एम्बुलेंस में: http://jsfiddle.net/GWqcF/2

Comments

FontAwesome आइकनों हैं फोंट। मैंने अपने उत्तर में FontAwesome का भी उल्लेख किया है और यह कहने के लिए चला गया कि वे उन ब्राउज़र को कैसे संभालते हैं जो पेज पर आइकन जोड़ने की अपनी सीएसएस पद्धति का समर्थन नहीं करते हैं।

— जेम्स डोनली

आइकन फ़ॉन्ट के पात्र हैं। एक कच्चे उदाहरण के रूप में: "Z" अक्षर को एक सूटकेस की तरह दिखने के लिए डिज़ाइन किया जा सकता है, जिसे फ़ॉन्ट के रूप में सहेजा जाता है और फिर एक वेबसाइट पर उपयोग किया जाता है।

— जेम्स डोनली

यहाँ पूरी तरह से कच्चे FontAwesome का उपयोग करने का एक उदाहरण दिया गया है, एक एम्बुलेंस में बदल रहा है: jsfiddle.net/GWqcF/2

— जेम्स डोनली

@VivekChandra हाँ यह सही है! :-) चिह्न फोंट किसी भी अन्य फॉन्ट की तरह होते हैं सिवाय इसके कि अक्षर आइकॉन की तरह दिखने के लिए स्टाइल किए जाते हैं। FontAwesome "निजी उपयोग" के लिए आरक्षित वर्णों की एक श्रृंखला का उपयोग करता है ।

— जेम्स डोनली

बहुत बढ़िया। सभी संसाधनों के लिए धन्यवाद - इस पर गौर करेंगे, चीजें अब अधिक स्पष्ट हैं।

— विवेक चंद्र

Answer 2

यदि आपका सवाल है कि एक CSS वर्ग एक विशिष्ट चरित्र कैसे डाल सकता है (जो कि विशेष फ़ॉन्ट में एक आइकन के रूप में प्रस्तुत किया जाएगा), तो FontAwesome के लिए स्रोत पर एक नज़र डालें :

.icon-glass:before { content: "\f000"; }
.icon-music:before { content: "\f001"; }
.icon-search:before { content: "\f002"; }
.icon-envelope:before { content: "\f003"; }
.icon-heart:before { content: "\f004"; }

तो एक सीएसएस सामग्री निर्देश का उपयोग चरित्र को सम्मिलित करने के लिए किया जाता है (जो कि यूनिकोड के एक विशेष निजी-उपयोग आरक्षित क्षेत्र से है जो अन्य पाठकों को गड़बड़ नहीं करता है)।

Comments

स्लैश च का क्या अर्थ है?

— कॉडीबगस्टीन

इसका fहिस्सा नहीं है, यह सिर्फ हेक्स संख्या 15. है। बैकस्लैश एक हेक्साडेसिमल कोडपॉइंट के लिए भागने का क्रम शुरू करता है। \f004में सीएसएस HTML की तरह है।

— थिलो

Answer 3

वेबफोंट आइकन कैसे काम करते हैं?

वेब-फॉन्ट आइकन सीएसएस का उपयोग करके सामग्री संपत्ति का उपयोग करके HTML में एक विशिष्ट ग्लिफ़ को इंजेक्ट करने के लिए काम करते हैं। यह तब @font-faceएक dingbat webfont को लोड करने के लिए उपयोग करता है जो इंजेक्शन वाले ग्लिफ़ को स्टाइल करता है। उत्थान यह है कि इंजेक्शन वाला ग्लिफ़ वांछित आइकन बन जाता है।

शुरू करने के लिए, आपको उन आइकन के साथ एक वेब-फॉन्ट फाइल की आवश्यकता होगी, जिनकी आपको जरूरत है, या तो विशेष ASCIIवर्णों के लिए (A, B, C, !, @, #, etc.)या यूनिकोड फ़ॉन्ट के निजी उपयोग क्षेत्र में परिभाषित किया गया है, जो कि फ़ॉन्ट में रिक्त स्थान हैं जो विशिष्ट वर्णों द्वारा उपयोग नहीं किया जाएगा। यूनिकोड एन्कोडेड फ़ॉन्ट।

और अधिक पढ़ें, उत्तरदायी वेबफॉन्ट आइकन पर वेबफॉन्ट आइकन कैसे बनाएं ।