← Back to HTML Course | Chapter 10: Reference & Interview Prep | Lesson 12 of 20

HTML आइकन फॉन्ट्स

हर browser के आसानी से crisp vector icons दिखा पाने से बहुत पहले, developers ने एक चालाक तरीका खोजा: icons के एक सेट को font file में pack कर दो, ठीक उसी तरह जैसे letters को एक typeface में pack किया जाता है। हर icon किसी character से map होता है, इसलिए किसी search icon को दिखाना उतना ही आसान हो जाता है जितना किसी special font में एक अकेला letter लिखना। Icon fonts आपको साधारण CSS text properties जैसे font-size और color इस्तेमाल करके icons resize, recolor, और style करने देते हैं, बिना हर icon और हर color variation के लिए अलग image files की ज़रूरत के। हालांकि SVG icons अपनी sharper detail के लिए ज़्यादा लोकप्रिय हो गए हैं, icon fonts अभी भी widely इस्तेमाल होते हैं क्योंकि इन्हें setup करना आसान है और ये दुनिया भर के devices और connections पर consistently काम करते हैं।

In this page:

  1. आइकन फॉन्ट्स क्या हैं?
  2. आइकन फॉन्ट लाइब्रेरी लिंक करना
  3. HTML में आइकन क्लासेस इस्तेमाल करना
  4. CSS से आइकन्स को साइज़ और कलर करना
  5. आइकन फॉन्ट्स के लिए एक्सेसिबिलिटी बातें
Syntax
markup 
<link rel="stylesheet" href="icon-font.css">
<i class="icon-class"></i>

आइकन फॉन्ट्स क्या हैं?

icon font एक typeface है जहाँ हर character किसी letter या number की बजाय एक छोटे icon से मैप होता है। चूँकि icons बस font glyphs हैं, इन्हें साधारण text styling जैसे size, color, और shadow अपने आप मिल जाती है।

Font Awesome web पर सबसे लोकप्रिय icon font library है, जो icons का एक बड़ा catalog देती है और लाखों sites को power करती है।

Note: icon fonts एक अच्छा विकल्प हैं जब आपको कई simple, single-color icons चाहिए जो किसी भी zoom level पर साफ resize हो सकें।
Warning: अगर उनकी font file load होने में असफल हो जाए, तो icon fonts plain squares या missing-character boxes के रूप में render होते हैं।

उदाहरण: What Are Icon Fonts?

markup 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
<body>
  <i class="fa-solid fa-star"></i>
</body>
</html>

आइकन फॉन्ट लाइब्रेरी लिंक करना

ज़्यादातर icon fonts एक web font की तरह ही एक stylesheet और एक या ज़्यादा font files के रूप में distribute होते हैं। अपने document के head में stylesheet लिंक करने से पूरे page पर हर icon class उपलब्ध हो जाती है।

library चुनते समय: Font Awesome सबसे लोकप्रिय option है जिसमें अब तक का सबसे बड़ा icon set है, Google के Material Icons Google के अपने Material Design system को follow करते हैं और उन apps के लिए सही हैं जो पहले से Material Design पर बनी हैं, और Bootstrap Icons जानबूझकर हल्के हैं, जो उन projects के लिए अच्छे हैं जो पहले से Bootstrap framework इस्तेमाल कर रहे हैं।

Note: अगर आपकी site को किसी third-party server पर निर्भर हुए बिना भरोसेमंद तरीके से काम करना है, तो icon font files खुद host करें।
Warning: एक ही page पर किसी icon font library को दो बार लोड करने से conflicting class names और unexpected icon glyphs हो सकते हैं।

उदाहरण: Linking an Icon Font Library

markup 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
<body>
  <i class="fa-solid fa-heart"></i>
</body>
</html>

HTML में आइकन क्लासेस इस्तेमाल करना

icon fonts आमतौर पर एक base class और एक specific icon class के साथ, किसी खाली inline element पर लगाकर trigger किए जाते हैं। base class font family सेट करती है, जबकि specific class यह चुनती है कि कौन-सा character (icon) दिखाना है।

Google के Material Icons सीधे Google के Material Design system से लिए गए हैं, जो उन्हें Material Design guidance को follow करने वाले interfaces के लिए एक स्वाभाविक choice बनाता है।

Note: icon के आसपास एक semantic wrapping element, जैसे button या link, इस्तेमाल करें ताकि icon के render न होने पर भी उसका purpose स्पष्ट रहे।
Warning: icon element के अंदर text content जोड़ने से icon glyph के साथ stray letters दिख सकते हैं।

उदाहरण: Using Icon Classes in HTML

markup 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
<body>
  <button>
    <i class="fa-solid fa-trash"></i> Delete
  </button>
</body>
</html>

CSS से आइकन्स को साइज़ और कलर करना

चूँकि icon font glyphs text characters हैं, font-size और color जैसी साधारण CSS properties यह control करती हैं कि हर icon कितना बड़ा और किस रंग का दिखे, बिना अलग icon image files की ज़रूरत के।

Bootstrap Icons जानबूझकर हल्के रखे गए हैं, जो उन्हें उन projects के लिए उपयुक्त बनाता है जो पहले से Bootstrap framework इस्तेमाल कर रहे हैं और एक बड़ी icon library जोड़ने से बचना चाहते हैं।

Note: icon size को em units में सेट करें ताकि icons आसपास के text के साथ अपने आप scale हों।
Warning: parent element पर color बदलने से उसके अंदर nested हर icon अनजाने में recolor हो सकता है।

उदाहरण: Sizing and Coloring Icons with CSS

markup 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
<body>
  <i class="fa-solid fa-star" style="font-size: 2em; color: gold;"></i>
</body>
</html>

आइकन फॉन्ट्स के लिए एक्सेसिबिलिटी बातें

चूँकि icon fonts decorative characters के रूप में render होते हैं, screen readers इन्हें या तो skip कर सकते हैं या underlying character को गलत तरीके से पढ़ सकते हैं। एक text alternative देने से assistive technology इस्तेमाल करने वाले visitors के लिए icon का meaning बना रहता है।

Note: सिर्फ decorative icons पर aria-hidden=true जोड़ें और meaning के लिए visible या screen-reader-only text पर निर्भर रहें।
Warning: किसी critical action, जैसे delete या submit, को बताने के लिए सिर्फ एक icon पर निर्भर रहना उन visitors को confuse कर सकता है जो उसे साफ नहीं देख पाते।

उदाहरण: Accessibility Considerations for Icon Fonts

markup 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
  <style>
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
    }
  </style>
</head>
<body>
  <button>
    <i class="fa-solid fa-trash" aria-hidden="true"></i>
    <span class="sr-only">Delete</span>
  </button>
</body>
</html>
Live Example
Related Topics

HTML वेब फॉन्ट्स · HTML प्रोग्रेस और मीटर · HTML रिस्पॉन्सिव इमेजेस · HTML आउटपुट एलिमेंट

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
🔒

Chapter Quiz — Complete all 20 topics to unlock

0/20 topics done

Complete these topics first:

← Previous Lesson HTML Web Fonts Next Lesson → HTML Progress & Meter

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.