CSS Icons

Icons बहुत छोटी सी जगह में बहुत सारा meaning pack कर देते हैं, एक trash can icon बिना एक भी शब्द text के तुरंत delete पढ़ा जाता है। हर icon हाथ से draw करने के बजाय, ज़्यादातर sites एक icon library पर भरोसा करती हैं: एक font या files का set, जिसमें सैकड़ों ready-made icons pack होते हैं जिन्हें आप drop करके plain CSS से style कर सकते हैं। सबसे popular icon libraries में से तीन हैं Font Awesome, Google के Material Icons, और Bootstrap Icons। हर एक लगभग एक जैसे basic तरीके से काम करती है: एक stylesheet link करें, फिर उस specific icon को दिखाने के लिए किसी element में एक छोटा class name जोड़ें। एक बार page पर आने के बाद, font-size और color जैसी रोज़मर्रा की CSS properties exactly control करती हैं कि वह कैसा दिखता है। Icon libraries वह तरीका हैं जिससे cookiescursor.com जैसी site buttons से लेकर navigation तक हर जगह, बिना कोई custom graphic design किए, consistent, professional-looking icons डाल सकती है।

In this page:

Font Awesome Integration
Google Material Icons
Bootstrap Icons
Icons को Size और Color देना
Buttons के अंदर Icons

Font Awesome Integration

Font Awesome सबसे widely used icon libraries में से एक है, जिसमें icons का एक विशाल catalog है। इसकी stylesheet link करना page पर कहीं भी simple class-based icons unlock कर देता है।

Note: Font Awesome icon classes आमतौर पर 'fa-solid fa-icon-name' pattern follow करती हैं, exact icon name उनके documentation में double check करें।

Warning: अगर Font Awesome stylesheet load न हो पाए, तो page के सभी icons चुपचाप गायब हो जाते हैं या एक खाली box की तरह दिखते हैं।

उदाहरण: Font Awesome Integration

css

<!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>
    i { font-size: 2em; color: crimson; }
  </style>
</head>
<body>
  <i class="fa-solid fa-star"></i>
  <i class="fa-solid fa-heart"></i>
  <i class="fa-solid fa-home"></i>
</body>
</html>

Google Material Icons

Material Icons Google का अपना icon set है, जो Material Design की visual language follow करता है। यह Font Awesome जैसे ही काम करता है, लेकिन एक span के अंदर text की तरह plain English icon names इस्तेमाल करता है।

Note: Material Icons उन sites के साथ naturally जोड़ी जाती हैं जो पहले से Material Design conventions follow करती हैं, visual consistency के लिए।

Warning: Icon name को span के text content के अंदर बिल्कुल वैसे ही type करना होता है जैसा Google document करता है, एक typo सिर्फ plain text की तरह दिखता है, icon की तरह नहीं।

उदाहरण: Google Material Icons

css

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <style>
    .material-icons { font-size: 2em; color: teal; }
  </style>
</head>
<body>
  <span class="material-icons">favorite</span>
  <span class="material-icons">star</span>
  <span class="material-icons">home</span>
</body>
</html>

Bootstrap Icons

Bootstrap Icons एक lightweight icon library है जो naturally Bootstrap framework के साथ जुड़ती है, हालांकि यह standalone भी अच्छी तरह काम करती है, किसी empty element पर छोटे class names इस्तेमाल करके।

Note: जब आपको Font Awesome जैसी बड़ी library के बिना एक साफ़, modern icon set चाहिए तो Bootstrap Icons एक solid choice है।

Warning: Bootstrap Icons के class names सभी 'bi bi-' से शुरू होते हैं, base bi class भूल जाना icon को unstyled छोड़ देता है।

उदाहरण: Bootstrap Icons

css

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.min.css">
  <style>
    i { font-size: 2em; color: steelblue; }
  </style>
</head>
<body>
  <i class="bi bi-heart"></i>
  <i class="bi bi-star"></i>
  <i class="bi bi-house"></i>
</body>
</html>

Icons को Size और Color देना

क्योंकि icon library glyphs styled text characters की तरह render होते हैं, font-size और color जैसी सामान्य CSS properties सीधे control करती हैं कि वे कितने बड़े और किस color के दिखते हैं, किसी special icon-specific property की ज़रूरत नहीं।

Note: Icon size को em units में set करें ताकि कोई icon आस-पास के text के साथ अपने आप scale हो।

Warning: किसी parent element पर color बदलना अंदर nested हर icon को अनजाने में recolor कर सकता है, क्योंकि color default रूप से inherit होता है।

उदाहरण: Sizing and Coloring Icons

css

<!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>
    i {
      font-size: 2em;
      color: crimson;
    }
  </style>
</head>
<body>
  <i class="fa-solid fa-star"></i>
</body>
</html>

Buttons के अंदर Icons

किसी button के अंदर एक icon को छोटे text label के साथ जोड़ना सबसे common icon use cases में से एक है, जो visitors को एक तेज़ visual cue और साफ़, readable text दोनों देता है।

Note: icon और उसके label text के बीच एक छोटा margin या gap जोड़ें ताकि वे साथ में cramped न लगें।

Warning: बिना किसी visible text वाले icon-only button को उसके action describe करने के लिए एक aria-label चाहिए ताकि screen reader users guess करते न रह जाएँ।

उदाहरण: Icons Inside Buttons

css

<!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>
    button {
      display: flex;
      align-items: center;
      gap: 6px;
    }
  </style>
</head>
<body>
  <button><i class="fa-solid fa-download"></i> Download</button>
</body>
</html>

Live Example

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson CSS Custom Fonts Next Lesson → CSS Links