Bootstrap Icons क्या हैं
Bootstrap Icons एक free icon set है जिसे आप एक font, SVG sprites, या inline SVG की तरह इस्तेमाल कर सकते हैं।
In this page:
Syntax
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@version/font/bootstrap-icons.css">
<i class="bi bi-icon-name"></i>Bootstrap Icons
एक CDN से stylesheet include करें और bi bi-house या bi bi-heart-fill जैसी classes वाला एक i element इस्तेमाल करें। Icons font size और colour inherit करते हैं, इसलिए fs-2 और text-danger जैसी text utilities इन्हें style करती हैं।
अकेले Icons को aria-label या visually-hidden text इस्तेमाल करते हुए एक accessible label चाहिए।
Note:
meaning carry करने वाले Icons को screen readers के लिए text alternatives चाहिए।
उदाहरण: Bootstrap Icons
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" rel="stylesheet">
<div class="container">
<i class="bi bi-house fs-2 me-2"></i>
<i class="bi bi-heart-fill fs-2 text-danger me-2"></i>
<button class="btn btn-primary"><i class="bi bi-cloud-download" aria-hidden="true"></i> Download</button>
<button class="btn btn-outline-secondary" aria-label="Settings"><i class="bi bi-gear"></i></button>
</div>
</body>
</html>Live Example
Related Topics
{# 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. #}
आम गलतियां
- icon font stylesheet भूल जाना
- बिना labels के Icon-only buttons
- images से icons size करना
चैप्टर सारांश
- bootstrap-icons stylesheet add करें
- i.bi.bi-name इस्तेमाल करें
- Icons size और colour inherit करते हैं
- Accessible labels add करें
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: