fonts
आइकन फ़ॉन्ट
खोज…
एक वेब पेज पर एक आइकन फ़ॉन्ट भी शामिल है
अपने CSS में एक आइकन फ़ॉन्ट शामिल करने के लिए, आप निम्नलिखित कोड शामिल कर सकते हैं:
@font-face {
font-family: 'myfont';
src:url('fonts/myfont.eot?-td2xif');
src:url('fonts/myfont.eot?#iefix-td2xif') format('embedded-opentype'),
url('fonts/myfont.woff?-td2xif') format('woff'),
url('fonts/myfont.ttf?-td2xif') format('truetype'),
url('fonts/myfont.svg?-td2xif#myfont') format('svg');
// Different URLs are required for optimal browser support
// Make sure to :
// 1) replace the URLs with your font's URLs
// 2) replace `#myfont` with the name of your font
font-weight: normal; // To avoid the font inherits boldness
font-style: normal; // To avoid font inherits obliqueness or italic
}
.icon {
font-family: 'myfont', Verdana, Arial, sans-serif; // Use regular fonts as fallback
speak: none; // To avoid screen readers trying to read the content
font-style: normal; // To avoid font inherits obliqueness or italic
font-weight: normal; // To avoid the font inherits boldness
font-variant: normal; // To avoid the font inherits small-caps
text-transform: none; // To avoid the font inherits capitalization/uppercase/lowercase
line-height: 1; // To avoid the font inherits an undesired line-height
-webkit-font-smoothing: antialiased; // For improved readability on Webkit
-moz-osx-font-smoothing: grayscale; // For improved readability on OSX + Mozilla
}
एक वेब पेज पर एक आइकन फ़ॉन्ट का उपयोग करना
अपने HTML में एक आइकन का उपयोग करने के लिए, आप निम्न में से प्रत्येक कर सकते हैं:
<!-- Method 1 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family for an entire HTML element -->
<!-- Define your icon fonts in your CSS font-family after your regular fonts -->
<!-- This means that regular characters are default. Icons are a fallback -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<div class="rate"><p>I rate this movie ★★★★☆!!</p></div>
<!-- Method 2 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family for an entire HTML element -->
<!-- Define your icon fonts in your CSS font-family after your regular fonts -->
<!-- This means that regular characters are default. Icons are a fallback -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<div class="rate"><p>I rate this movie ★★★★☆!!</p></div>
<!-- Method 3 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons but not the HTML elements that include them -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<p>I rate this movie <span class="icon">★★★★☆</span>!!</p>
<!-- Method 4 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons but not the HTML elements that include them -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<p>I rate this movie <span class="icon">★★★★☆</span>!!</p>
<!-- Method 5 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<p>I rate this movie
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">☆</span>
!!
</p>
<!-- Method 6 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<p>I rate this movie
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">☆</span>
!!
</p>
<!-- Method 7-->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts -->
<!-- This means that icons are default. Regular characters are a fallback -->
<!-- Use the 'content' style rule with a ':before selector' in your CSS -->
<p>I rate this movie
<span class="icon icon-star"></span>
<span class="icon icon-star"></span>
<span class="icon icon-star"></span>
<span class="icon icon-star"></span>
<span class="icon icon-star-unfilled"></span>
!!
</p>
यदि आप विधि 7 का विकल्प चुनना चाहते हैं, तो आपको कुछ अतिरिक्त सीएसएस कोड की आवश्यकता होगी। यह सीएसएस कोड इस तरह दिखेगा:
.icon-star:before {
content: "\2605";
}
.icon-star-unfilled:before {
content: "\2606";
}
आइकॉनिक , फॉन्ट विस्मयकारी या ग्लिफ़िकॉन जैसे आइकन फोंट आमतौर पर सभी विधि 7 का उपयोग करते हैं। यह आपको धोखा देने वाली शीट से विशेष वर्णों को कॉपी-पेस्ट करने या HTML संस्थाओं का उपयोग करने के लिए मजबूर करने से बचने के लिए है।
हालाँकि, यह एक विधि है जिसमें कई डाउनसाइड हैं। सबसे पहले, इसके लिए समर्थन की आवश्यकता है :before सीएसएस चयनकर्ता :before और UNICODE वर्णों के लिए भागने के क्रम का उपयोग। न तो IE6-7 और न ही वेबकिट के कुछ संस्करण इस समर्थन को प्रदान करते हैं।
एक और नकारात्मक पहलू यह है कि आपको प्रत्येक आइकन के लिए एक अलग HTML टैग का उपयोग करना होगा, जिसमें प्रत्येक आइकन आइकन फ़ॉन्ट से एक वर्ण के अनुरूप होगा। HTML टैग के भीतर कई आइकन प्रदर्शित करना अन्य विधियों के साथ, विधि 7 के साथ संभव नहीं है।
अन्य तरीकों की अपनी डाउनसाइड्स हैं, हालांकि। विधियाँ 1, 3 और 5 के लिए आपको चरित्र को चीट शीट से कॉपी-पेस्ट करने की आवश्यकता होती है या चरित्र को अपने कोड में रखने का उपयोग होता है। आपका कोड संपादक चरित्र को प्रदर्शित करने में सक्षम नहीं हो सकता है या यह आपके आइकन फ़ॉन्ट में एक से एक अलग चरित्र प्रदर्शित कर सकता है यदि आइकन फ़ॉन्ट उस चरित्र को गैर-मानक मैपिंग का उपयोग करता है।
विधियों 1, 3 और 5 को भी यह आवश्यक है कि आपका ब्राउज़र सही वर्ण प्रदर्शित करने के लिए उचित एन्कोडिंग का उपयोग करे। UNICODE वर्णों के लिए, यह ASCII वर्णों के लिए उतना स्पष्ट नहीं है। हालाँकि, यह आपके HTML-डॉक्यूमेंट के head में मेटा-टैग <meta charset="utf-8" /> को जोड़कर सुनिश्चित किया जाना चाहिए।
विधियों 2, 4 और 6 में आपको चरित्र को कॉपी-पेस्ट करने की आवश्यकता नहीं है, हालांकि यह आपके कोड को मनुष्यों द्वारा कम पठनीय बनाता है और कोड में किसी भी बदलाव से मानव त्रुटि के लिए अधिक परिवर्तन करता है। साथ ही, जैसा कि आप उन प्रत्येक आइकन के लिए HTML-निकाय कोड देखना चाहते हैं जिन्हें आप उपयोग करना चाहते हैं या आपको उन्हें याद रखने की आवश्यकता होगी। जबकि यह स्पष्ट रूप से विधि 7 में उपयोग की जाने वाली कक्षाओं पर भी लागू होता है, उन वर्गों को HTML इकाई कोड की तुलना में याद रखना बहुत आसान है।
एक वेब पेज पर एक विशिष्ट प्रतीक शामिल है
एक डाउन-पॉइंटिंग त्रिकोण पर विचार करें।
वेब पेज पर इस प्रतीक को प्रदर्शित करने के कई सही तरीके हैं।
विधि 1: दशमलव HTML इकाई का उपयोग करें
HTML:
▼
विधि 2: हेक्सिडेसिमल एचटीएमएल इकाई का उपयोग करें
HTML:
▼
विधि 3: सीधे वर्ण का उपयोग करें
HTML:
▼
विधि 4: CSS का उपयोग करें
HTML:
<span class='icon-down'></span>
सीएसएस:
.icon-down:before {
content: "\25BC";
}
इन तीन विधियों में से प्रत्येक में एक ही आउटपुट होना चाहिए। अन्य प्रतीकों के लिए, वही तीन विकल्प मौजूद हैं। कुछ के पास एक चौथा विकल्प भी है, जिससे आप स्ट्रिंग आधारित संदर्भ (जैसे। ♥ ♥ प्रदर्शित करने के लिए) का उपयोग कर सकते हैं।
आप का उपयोग कर सकता है जैसे एक संदर्भ वेबसाइट Unicode-table.com जो प्रतीक यूनिकोड और जो कोड के साथ वे अनुरूप में समर्थित हैं खोजने के लिए। उदाहरण के लिए, आप http://unicode-table.com/en/25BC/ पर डाउन-पॉइंटिंग त्रिकोण के लिए मान पाते हैं।
ध्यान दें कि ये विधियाँ केवल उन आइकन के लिए पर्याप्त हैं जो हर ब्राउज़र में डिफ़ॉल्ट रूप से उपलब्ध हैं। ☂, ❄, ★, ☭, ⎗, ⎘ या ❄ जैसे प्रतीकों के लिए, यह मामला होने की संभावना कम है। हालांकि अन्य UNICODE प्रतीकों के लिए क्रॉस-ब्राउज़र सहायता प्रदान करना संभव है, आपको एक आइकन फ़ॉन्ट प्राप्त करना होगा या अपना स्वयं का एक बनाना होगा। अपना स्वयं का फ़ॉन्ट बनाने के बारे में अधिक जानकारी के लिए अपना स्वयं का फ़ॉन्ट बनाना देखें।
लोकप्रिय आइकन फोंट
निम्नलिखित लोकप्रिय आइकन फ़ॉन्ट की एक सूची है: