@ फ़ॉन्ट-फेस का उपयोग करके, आप आइकन (आइकन) पीएनजी या जीआईएफ के रूप में अपलोड नहीं कर सकते हैं, लेकिन उन्हें फ़ॉन्ट के अंदर एम्बेड करें और उपयोगकर्ता को @ फ़ॉन्ट-फेस निर्देश के माध्यम से लोड करें। CSS3 आपको माउस के ऊपर मंडराने पर, जब आप माउस पर मंडराते हैं, तो एक चिकने रंग परिवर्तन के साथ इस तरह के आइकन को घुमाने, छाया जोड़ने या एनिमेटेड प्रभाव डालने की अनुमति देता है।

यहां IconPack फॉन्ट सेट (.eot, .woff, .ttf, .svg) का उपयोग करने और माउस का उपयोग करने के निर्देश दिए गए हैं :before छद्म तत्व :before और span टैग।

 <style> .staricon { font-family: 'IconPack'; } .staricon:before { content: 'a'; } .show { display:block; } .hide { display:none; } </style> <div class="staricon"> <span class="show">star</span> </div> 

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

लाभ

संभावित रूप से बहुत कम HTTP अनुरोध
सैकड़ों छोटी तस्वीरों को डाउनलोड करने में एक बड़ी फ़ाइल की तुलना में अधिक समय लग सकता है। कुछ मामलों में, इससे पृष्ठ का तेजी से लोड हो सकता है (जैसा कि फिनोम हैब्रायज़र ने टिप्पणियों में सही ढंग से नोट किया है, स्प्राइट्स का उपयोग इसके लिए किया जाता है)।

एकल आइकन, अनंत आकार।
वेक्टर आइकन का मतलब स्केलिंग है। Icon_8x8.png, icon_16x16.png, icon_24x24.png, आदि को भूल जाएं।

अधिक स्पष्ट आइकन प्रबंधन प्रणाली
आइकन प्रबंधन, जहां सभी के पास विभिन्न आकारों और रंगों में विकल्पों का एक गुच्छा होता है, एक गंभीर सिरदर्द हो सकता है। फोंट के साथ, सभी रंग / आकार एक फ़ाइल में हैं।

सीएसएस की एक पंक्ति के साथ माउस को प्रतिस्थापित करना
सभी टाइपकिट के बारे में बात करते हैं और फोंट एम्बेड करना कितना आसान है, भविष्य में उसी तरह से आइकन पर स्विच कर सकते हैं।

CSS3 के विशेष प्रभाव
उपरोक्त एनिमेटेड प्रभाव, चिकनी होवर रंग परिवर्तन और अन्य प्रभाव वेब डिज़ाइन के लिए एक दिलचस्प तकनीक हो सकते हैं।

कमियों

फ़ॉन्ट्स बड़े हो सकते हैं
90 केबी के लिए एक जटिल फ़ॉन्ट आसानी से पार किया जा सकता है। यदि आपको किसी विशेष आइकन की आवश्यकता है, तो इस आकार को सही ठहराना कठिन है।

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

जोखिम डिजाइन को बर्बाद करते हैं
फोंट से आइकन के साथ प्रयोग से पता चलता है कि यदि आप इस तकनीक का दुरुपयोग करते हैं तो किसी डिज़ाइन को बर्बाद करना कितना आसान है।

बहु-रंगीन आइकन काम नहीं करते हैं
यदि आप बहु-रंगीन आइकन (उदाहरण के लिए, देश के झंडे) को लागू करना चाहते हैं, तो आप निराश होंगे: CSS3 आपको केवल साधारण ग्रेडिएंट का उपयोग करने की अनुमति देता है, लेकिन कुछ और नहीं।

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

srd के माध्यम से