HTML List Custom Bullets and Icons

HTML lists में default bullets simple dots या numbers होते हैं। Custom bullets और icons का मतलब है कि हम default bullets की जगह अपनी पसंद के symbols, images या icons दिखाएँ। इनका उपयोग UI को attractive और meaningful बनाने के लिए किया जाता है।

Default HTML List Bullets

Unordered list में by default dot दिखाई देता है।

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

CSS से Default Bullets हटाना

Custom bullet लगाने से पहले default bullet remove करना ज़रूरी है।

ul {
  list-style: none;
  padding: 0;
}

list-style-type से Custom Bullets

CSS के list-style-type से different built-in bullets लगाए जा सकते हैं।

ul {
  list-style-type: square;
}

Common values
circle
square
disc
decimal
lower-alpha
upper-roman

Unicode Symbols को Bullet की तरह इस्तेमाल करना

CSS ::before pseudo-element से custom symbol लगाया जा सकता है।

<ul class="custom-bullet">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

.custom-bullet {
  list-style: none;
  padding-left: 20px;
}

.custom-bullet li::before {
  content: "✔ ";
  color: green;
}

Emoji को Bullet की तरह इस्तेमाल करना

Emoji bullets modern websites में popular हैं।

.custom-bullet li::before {
  content: "🔥 ";
}

Example output
🔥 HTML
🔥 CSS
🔥 JavaScript

Image को Bullet की तरह इस्तेमाल करना

Image bullets के लिए list-style-image का उपयोग किया जा सकता है।

ul {
  list-style-image: url("bullet.png");
}

यह simple तरीका है, लेकिन position और size पर limited control देता है।

Image Bullet with Full Control

Better control के लिए ::before के साथ image use करें।

.icon-list {
  list-style: none;
  padding-left: 25px;
}

.icon-list li::before {
  content: "";
  background-image: url("icon.png");
  background-size: contain;
  width: 16px;
  height: 16px;
  display: inline-block;
  margin-right: 10px;
}

Font Icons को Bullet की तरह इस्तेमाल करना

Font Awesome जैसे icon fonts bullets के रूप में use किए जा सकते हैं।

<ul class="fa-list">
  <li><i class="fa fa-check"></i> HTML</li>
  <li><i class="fa fa-check"></i> CSS</li>
  <li><i class="fa fa-check"></i> JavaScript</li>
</ul>

यह तरीका icons के size और color पर अच्छा control देता है।

SVG Icons को Bullet की तरह इस्तेमाल करना

SVG icons scalable और sharp होते हैं।

.svg-list li::before {
  content: "";
  background: url("icon.svg") no-repeat center;
  width: 16px;
  height: 16px;
  display: inline-block;
  margin-right: 8px;
}

Ordered List में Custom Number Style

Ordered list में numbers को style किया जा सकता है।

ol {
  list-style-type: upper-roman;
}

या custom counter से।

ol {
  counter-reset: step;
}

ol li::before {
  counter-increment: step;
  content: counter(step) ") ";
  font-weight: bold;
}

Navigation Lists में Custom Icons

Menus में icons के साथ list common है।

<ul class="menu">
  <li>🏠 Home</li>
  <li>📄 About</li>
  <li>📞 Contact</li>
</ul>

Accessibility Considerations

List structure हमेशा semantic रखें
Important meaning सिर्फ icon पर depend न हो
Screen readers के लिए text readable होना चाहिए