Bootstrap: الأيقونات
آخر تحديث: 2026-08-26
1. مقدمة الدرس
(1) المتطلبات السابقة
- الاستخدام الأساسي لمكونات Bootstrap (الدرس 16 - الأكورديون)
- عناصر HTML السطرية وسمة class
- التحكم بلون وحجم الخط في CSS
(2) 🎯 ما ستتعلّمه
- إدخال مكتبة Bootstrap Icons عبر CDN
- استخدام فئات
bi-*لتضمين الأيقونات في الصفحة - التحكم بحجم ولون الأيقونات باستخدام أدوات
fs-*وtext-* - دمج الأيقونات في مكونات مثل الأزرار وشريط التنقل والبطاقات
- تنفيذ عرض أيقونات أكثر مرونة باستخدام طريقة SVG
(3) المشكلات
تحتاج صفحة إدارة المنتجات التي يعمل عليها Charlie إلى إضافة أيقونات للأزرار والتنقل لتحسين القراءة — أيقونة قلم لزر التعديل، أيقونة سلة مهملات لزر الحذف، وأيقونة بحث لشريط التنقل. مع Bootstrap Icons، يمكن فعل ذلك في بضعة أسطر من الكود.
(4) الحل
الأيقونات عناصر بصرية مهمة في الواجهة. Bootstrap Icons هي مكتبة أيقونات SVG مفتوحة المصدر رسمية من Bootstrap، تحتوي على أكثر من 2000 أيقونة تعمل بشكل مثالي مع مكونات Bootstrap.
لفهم الفكرة: Bootstrap Icons = مكتبة أيقونات SVG — حجم صغير، قابلة للتكبير بلا حدود، ألوانها موروثة من CSS. تُدخلها باستخدام وسوم
<i>أو<svg>وتتحكم بحجمها ولونها عبر فئات Bootstrap المساعدة.
(5) الفوائد
إضافة الأيقونات تستغرق بضعة أسطر فقط من الكود مع Bootstrap Icons. جميع الأيقونات تتكامل بسلاسة مع مكونات Bootstrap، مع ألوان وأحجام موحدة وقابلة للتحكم، مما يحسّن قراءة الواجهة بشكل كبير.
2. إدخال Bootstrap Icons
▶ مثال: عرض أيقونات أساسي
HTML
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Icons Demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
<div class="container py-4">
<h5>Basic Icons</h5>
<i class="bi bi-house"></i> Home
<i class="bi bi-gear"></i> Settings
<i class="bi bi-person"></i> Profile
<i class="bi bi-envelope"></i> Messages
<i class="bi bi-bell"></i> Notifications
<hr>
<h5>Icons with Colors</h5>
<i class="bi bi-heart-fill text-danger fs-3"></i>
<i class="bi bi-star-fill text-warning fs-3"></i>
<i class="bi bi-check-circle-fill text-success fs-3"></i>
<i class="bi bi-info-circle-fill text-primary fs-3"></i>
<hr>
<h5>Icons in Buttons</h5>
<button class="btn btn-primary"><i class="bi bi-plus-lg"></i> Add</button>
<button class="btn btn-success"><i class="bi bi-pencil"></i> Edit</button>
<button class="btn btn-danger"><i class="bi bi-trash"></i> Delete</button>
<button class="btn btn-outline-secondary"><i class="bi bi-search"></i> Search</button>
<hr>
<h5>Icon Sizes</h5>
<i class="bi bi-circle fs-6"></i> fs-6
<i class="bi bi-circle fs-4"></i> fs-4
<i class="bi bi-circle fs-2"></i> fs-2
<i class="bi bi-circle fs-1"></i> fs-1
</div>
</body>
</html>
النتيجة: مكونات مع تطبيق أنماط Bootstrap 5.3 (مثل الأزرار والبطاقات وCarousel وCollapse إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (الفاتحة) وشبكة متجاوبة افتراضيًا. رابط CDN للأيقونات:
https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css
(1) الفئات الأساسية
HTML
<i class="bi bi-{name}"></i>
النتيجة: مكونات مع تطبيق أنماط Bootstrap 5.3 (مثل الأزرار والبطاقات وCarousel وCollapse إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (الفاتحة) وشبكة متجاوبة افتراضيًا. تستخدم أسماء الأيقونات بادئة
bi-+ الاسم الإنجليزي للأيقونة. يمكن عرض القائمة الكاملة للأيقونات في كتالوج Bootstrap Icons الرسمي.
| صيغة الأيقونة | التأثير المرئي | الوصف |
|---|---|---|
<i class="bi bi-alarm"></i> |
🔔 | أيقونة منبه |
<i class="bi bi-calendar"></i> |
📅 | أيقونة تقويم |
<i class="bi bi-camera"></i> |
📷 | أيقونة كاميرا |
<i class="bi bi-heart-fill"></i> |
❤️ | قلب ممتلئ (-fill النسخة الممتلئة) |
<i class="bi bi-star"></i> |
⭐ | نجمة فارغة (النسخة الخطية) |
لاحقة -fill: معظم الأيقونات توفر نسخة ممتلئة -fill. فـ bi-heart هي الخطية، وbi-heart-fill هي الممتلئة.
(2) فئات الأيقونات الشائعة
| الفئة | الأيقونات | السيناريوهات |
|---|---|---|
| التنقل | bi-house / bi-gear / bi-person |
قوائم التنقل |
| الإجراءات | bi-plus / bi-pencil / bi-trash / bi-download |
الأزرار |
| الحالات | bi-check-circle / bi-exclamation-triangle / bi-info-circle |
الملاحظات |
| التواصل | bi-twitter-x / bi-github / bi-linkedin |
روابط التواصل |
| الأسهم | bi-chevron-right / bi-arrow-left / bi-caret-down |
التنقل/Carousel |
| الوسائط | bi-play-fill / bi-pause-fill / bi-volume-up |
المشغلات |
3. طرق استخدام الأيقونات
▶ مثال: روابط أيقونات وسائل التواصل
HTML
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Media Icons</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
<div class="container py-4">
<h5>Social Media Links</h5>
<div class="d-flex gap-3 fs-3">
<a href="#" class="text-primary"><i class="bi bi-facebook"></i></a>
<a href="#" class="text-info"><i class="bi bi-twitter-x"></i></a>
<a href="#" class="text-danger"><i class="bi bi-instagram"></i></a>
<a href="#" class="text-success"><i class="bi bi-whatsapp"></i></a>
<a href="#" class="text-secondary"><i class="bi bi-github"></i></a>
<a href="#" class="text-primary"><i class="bi bi-linkedin"></i></a>
<a href="#" class="text-danger"><i class="bi bi-youtube"></i></a>
</div>
<hr>
<h5>With Labels</h5>
<div class="d-flex gap-4">
<a href="#" class="text-center text-decoration-none">
<i class="bi bi-facebook d-block fs-2 text-primary"></i>
<small>Facebook</small>
</a>
<a href="#" class="text-center text-decoration-none">
<i class="bi bi-twitter-x d-block fs-2 text-dark"></i>
<small>Twitter</small>
</a>
<a href="#" class="text-center text-decoration-none">
<i class="bi bi-instagram d-block fs-2 text-danger"></i>
<small>Instagram</small>
</a>
</div>
</div>
</body>
</html>
النتيجة: مكونات مع تطبيق أنماط Bootstrap 5.3 (مثل الأزرار والبطاقات وCarousel وCollapse إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (الفاتحة) وشبكة متجاوبة افتراضيًا.
▶ مثال: مجموعات الأيقونات والأزرار
HTML
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Icon Button Combinations</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
<div class="container py-4">
<h5>Button with Icon Left</h5>
<button class="btn btn-primary"><i class="bi bi-download me-1"></i> Download</button>
<button class="btn btn-success"><i class="bi bi-check-lg me-1"></i> Save</button>
<button class="btn btn-danger"><i class="bi bi-trash me-1"></i> Delete</button>
<h5 class="mt-3">Icon Only Button</h5>
<button class="btn btn-outline-primary" aria-label="Search"><i class="bi bi-search"></i></button>
<button class="btn btn-outline-secondary" aria-label="Notifications"><i class="bi bi-bell"></i></button>
<button class="btn btn-outline-info" aria-label="Settings"><i class="bi bi-gear"></i></button>
<h5 class="mt-3">Button Group with Icons</h5>
<div class="btn-group" role="group">
<button class="btn btn-outline-primary"><i class="bi bi-justify-left"></i></button>
<button class="btn btn-outline-primary"><i class="bi bi-justify"></i></button>
<button class="btn btn-outline-primary"><i class="bi bi-justify-right"></i></button>
</div>
<h5 class="mt-3">Icon + Badge Button</h5>
<button class="btn btn-primary position-relative">
<i class="bi bi-cart"></i> Cart
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">3</span>
</button>
</div>
</body>
</html>
النتيجة: مكونات مع تطبيق أنماط Bootstrap 5.3 (مثل الأزرار والبطاقات وCarousel وCollapse إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (الفاتحة) وشبكة متجاوبة افتراضيًا.
4. التحكم في حجم الأيقونة
▶ مثال: قائمة أيقونات بألوان مخصصة
HTML
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Color Icon List</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<style>
.icon-list { list-style: none; padding: 0; }
.icon-list li { padding: 0.5rem 0; display: flex; align-items: center; gap: 0.75rem; }
.icon-list .bi { font-size: 1.5rem; }
</style>
</head>
<body>
<div class="container py-4">
<h5>Feature List with Custom Colors</h5>
<ul class="icon-list">
<li><i class="bi bi-shield-check text-success"></i> <span><strong>Security</strong> — 256-bit encryption</span></li>
<li><i class="bi bi-lightning-charge text-warning"></i> <span><strong>Speed</strong> — CDN optimized delivery</span></li>
<li><i class="bi bi-cloud-check text-info"></i> <span><strong>Backup</strong> — Automatic daily backup</span></li>
<li><i class="bi bi-headset text-primary"></i> <span><strong>Support</strong> — 24/7 customer service</span></li>
<li><i class="bi bi-graph-up-arrow text-danger"></i> <span><strong>Analytics</strong> — Real-time dashboard</span></li>
</ul>
<hr>
<h5>Gradient Icons (Custom CSS)</h5>
<div class="d-flex gap-3 fs-1">
<i class="bi bi-heart-fill" style="color: #ff6b6b;"></i>
<i class="bi bi-star-fill" style="color: #feca57;"></i>
<i class="bi bi-moon-fill" style="color: #48dbfb;"></i>
<i class="bi bi-sun-fill" style="color: #ff9ff3;"></i>
<i class="bi bi-flower1" style="color: #54a0ff;"></i>
</div>
</div>
</body>
</html>
النتيجة: مكونات مع تطبيق أنماط Bootstrap 5.3 (مثل الأزرار والبطاقات وCarousel وCollapse إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (الفاتحة) وشبكة متجاوبة افتراضيًا.
| الفئة | قيمة CSS | الحجم الفعلي | السيناريوهات المناسبة |
|---|---|---|---|
fs-6 |
font-size: 1rem |
16px | أيقونات النص السطري |
fs-5 |
font-size: 1.25rem |
20px | أيقونات عناصر القائمة |
fs-4 |
font-size: 1.5rem |
24px | أيقونات الأزرار |
fs-3 |
font-size: 1.75rem |
28px | أيقونات شريط التنقل |
fs-2 |
font-size: 2rem |
32px | أيقونات عناوين البطاقات |
fs-1 |
font-size: 2.5rem |
40px | أيقونات كبيرة/Hero |
| مخصص | style="font-size: 3rem" |
48px+ | سيناريوهات التأكيد الخاصة |
(1) أنماط دمج الأيقونة مع النص
| النمط | البنية | مثال |
|---|---|---|
| أيقونة قبل | <i class="bi bi-* me-2"></i>Text |
<i class="bi bi-house me-2"></i>Home |
| أيقونة بعد | Text<i class="bi bi-* ms-2"></i> |
More<i class="bi bi-arrow-right ms-2"></i> |
| أيقونة فوق | <i class="bi bi-* d-block"></i><span>Text</span> |
أيقونات وسائل التواصل |
| أيقونة بديلة للنص | <button aria-label="Search"><i class="bi bi-search"></i></button> |
زر أيقونة فقط |
| أيقونة + شارة | <i class="bi bi-* position-relative"><span class="badge">N</span></i> |
عداد الإشعارات |
5. تطبيق الأيقونات في المكونات
HTML
<!-- أيقونة في زر -->
<button class="btn btn-primary"><i class="bi bi-plus-lg"></i> Add</button>
<button class="btn btn-danger"><i class="bi bi-trash"></i> Delete</button>
<button class="btn btn-outline-secondary"><i class="bi bi-search"></i> Search</button>
<!-- أيقونة في شريط التنقل -->
<nav class="nav">
<a class="nav-link" href="#"><i class="bi bi-house me-1"></i>Home</a>
<a class="nav-link" href="#"><i class="bi bi-box me-1"></i>Products</a>
<a class="nav-link" href="#"><i class="bi bi-envelope me-1"></i>Messages</a>
</nav>
<!-- أيقونة في تنبيه -->
<div class="alert alert-success d-flex align-items-center">
<i class="bi bi-check-circle-fill me-2"></i>
Operation completed successfully.
</div>
<div class="alert alert-danger d-flex align-items-center">
<i class="bi bi-exclamation-triangle-fill me-2"></i>
An error occurred. Please try again.
</div>
<!-- أيقونة في بطاقة -->
<div class="card text-center p-4">
<i class="bi bi-cloud-upload fs-1 text-primary"></i>
<h5 class="mt-2">Upload File</h5>
<p class="text-body-secondary">Drag and drop file here</p>
</div>
<!-- أيقونة في مجموعة قوائم -->
<ul class="list-group">
<li class="list-group-item"><i class="bi bi-house me-2"></i>Dashboard</li>
<li class="list-group-item"><i class="bi bi-box me-2"></i>Products</li>
<li class="list-group-item"><i class="bi bi-people me-2"></i>Users</li>
<li class="list-group-item"><i class="bi bi-graph-up me-2"></i>Reports</li>
</ul>
النتيجة: مكونات مع تطبيق أنماط Bootstrap 5.3 (مثل الأزرار والبطاقات وCarousel وCollapse إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (الفاتحة) وشبكة متجاوبة افتراضيًا.
6. طريقة SVG
إلى جانب استخدام Bootstrap Icons عبر فئات CSS، يمكنك أيضًا استخدام وسوم SVG <use> مباشرة للإشارة إلى ملف sprite.
HTML
<!-- طريقة الفئات -->
<i class="bi bi-house"></i>
<!-- طريقة SVG -->
<svg class="bi" width="16" height="16" fill="currentColor">
<use xlink:href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/bootstrap-icons.svg#house"/>
</svg>
<!-- SVG + لون مخصص -->
<svg class="bi text-success" width="32" height="32" fill="currentColor">
<use xlink:href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/bootstrap-icons.svg#check-circle"/>
</svg>
النتيجة: مكونات مع تطبيق أنماط Bootstrap 5.3 (مثل الأزرار والبطاقات وCarousel وCollapse إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (الفاتحة) وشبكة متجاوبة افتراضيًا.
| عنصر المقارنة | طريقة الفئات (<i>) |
طريقة SVG (<svg>) |
|---|---|---|
| الصياغة | <i class="bi bi-*"></i> |
<svg><use href="...#name"/></svg> |
| طريقة التحميل | ملف CSS من CDN | ملف sprite SVG عن بُعد |
| دعم الألوان المتعددة | لون واحد (يرث currentColor) | يدعم SVG متعدد الألوان |
| التحكم بالحجم | فئات fs-* المساعدة |
سمات width/height |
| التحكم باللون | فئات text-* المساعدة |
سمة fill أو text-* |
| السيناريوهات المناسبة | تكامل سريع، سيناريوهات قياسية | سيناريوهات تتطلب أنماطًا مخصصة |
7. تطبيقات متقدمة للأيقونات
▶ مثال: أيقونات بحركة CSS
HTML
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Icons</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<style>
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.icon-spin { animation: spin 2s linear infinite; display: inline-block; }
.icon-pulse { animation: pulse 1.5s ease-in-out infinite; display: inline-block; }
.icon-shake { animation: shake 0.5s ease-in-out infinite; display: inline-block; }
.icon-bounce { animation: bounce 1s ease-in-out infinite; display: inline-block; }
</style>
</head>
<body>
<div class="container py-4">
<h5>Animated Icons</h5>
<div class="d-flex gap-4 fs-1 mb-4">
<div class="text-center">
<i class="bi bi-arrow-clockwise icon-spin text-primary"></i>
<div><small>Spin</small></div>
</div>
<div class="text-center">
<i class="bi bi-bell-fill icon-shake text-warning"></i>
<div><small>Shake</small></div>
</div>
<div class="text-center">
<i class="bi bi-heart-fill icon-pulse text-danger"></i>
<div><small>Pulse</small></div>
</div>
<div class="text-center">
<i class="bi bi-chevron-down icon-bounce text-success"></i>
<div><small>Bounce</small></div>
</div>
</div>
<h5>Loading Spinner</h5>
<div class="d-flex align-items-center gap-3">
<i class="bi bi-arrow-clockwise icon-spin fs-3 text-primary"></i>
<span>Loading...</span>
</div>
<h5 class="mt-3">Notification Bell</h5>
<button class="btn btn-outline-warning"
onmouseover="this.querySelector('i').classList.add('icon-shake')"
onmouseout="this.querySelector('i').classList.remove('icon-shake')">
<i class="bi bi-bell-fill"></i> Notifications
</button>
</div>
</body>
</html>
النتيجة: مكونات مع تطبيق أنماط Bootstrap 5.3 (مثل الأزرار والبطاقات وCarousel وCollapse إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (الفاتحة) وشبكة متجاوبة افتراضيًا.
flowchart TD
A[Need an Icon] --> B{Usage Scenario}
B --> C[Navigation/Buttons/Lists]
B --> D[Social Media Links]
B --> E[Loading/Animation Effects]
C --> F{Quantity}
F --> G[Few < 10]
F --> H[Many ≥ 10]
G --> I[Inline SVG or Class]
H --> J[CDN CSS Import]
D --> K[Colored Class + Link]
E --> L[CSS keyframes Animation]
I --> M[Use bi-* class]
J --> M
M --> N[Style with fs-* / text-*]
النتيجة: مكونات مع تطبيق أنماط Bootstrap 5.3 (مثل الأزرار والبطاقات وCarousel وCollapse إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (الفاتحة) وشبكة متجاوبة افتراضيًا.
| السيناريو | الطريقة الموصى بها | الوصف |
|---|---|---|
| أيقونة زر | <i class="bi bi-*"></i> |
استخدم me-1/ms-1 للتحكم بالتباعد |
| زر أيقونة فقط | <button aria-label="..."><i ...></i></button> |
يجب إضافة aria-label |
| رابط تنقل | <a><i class="bi bi-* me-1"></i>Text</a> |
مزج أيقونة + نص |
| شارة إشعار | <span class="position-relative"><i ...></i><span class="badge">N</span></span> |
ضع الشارة في الزاوية العلوية |
| حركة تحميل | <i class="bi bi-arrow-clockwise" style="animation: spin 2s linear infinite"></i> |
مع حركة CSS |
| عنصر المقارنة | Bootstrap Icons | Font Awesome |
|---|---|---|
| الصيغة | أيقونات SVG (ليست خطًا) | خط أيقونات |
| عدد الأيقونات | 2000+ | 7800+ (Pro) |
| السعر | مجاني ومفتوح المصدر | النسخة المجانية محدودة، Pro مدفوع |
| البادئة | bi bi-* |
fas fa-* / far fa-* |
| التكامل مع Bootstrap | رسمي، تكامل مثالي | يتطلب إعدادًا إضافيًا |
| دعم الألوان المتعددة | لون واحد (SVG يدعم متعدد) | لون واحد (قيد الخط) |
| حجم الملف | ~120KB (CSS) | ~300KB+ (الحزمة الكاملة) |
❓ أسئلة شائعة
س كيف أختار بين Bootstrap Icons وFont Awesome؟
ج لمشاريع Bootstrap، Bootstrap Icons هو الخيار الأول — رسمي، تكامل سلس، حجم ملف أصغر. إذا كنت تستخدم بالفعل Font Awesome أو لديك احتياجات أيقونات خاصة (مثل المزيد من أيقونات العلامات التجارية)، يمكنك الاستمرار في استخدام Font Awesome ولكن انتبه للبادئات المختلفة:
bi bi-* مقابل fas fa-*.س ماذا لو لم تظهر الأيقونات؟
ج استكشاف الأخطاء في ثلاث خطوات: (1) تحقق من صحة رابط CDN وتحميله:
<link rel="stylesheet" href="...bootstrap-icons.min.css">؛ (2) تحقق من صحة اسم الأيقونة — بادئة bi- + اسم إنجليزي بأحرف صغيرة + واصلات؛ (3) افتح وحدة تحكم المتصفح وتحقق من تبويب Network لتأكيد تحميل CDN بنجاح.س هل يمكنني تحميل أيقونات محددة فقط دون استيراد ملف CSS بالكامل؟
ج نعم. استخدم طريقة SVG Sprite:
<use href="...bootstrap-icons.svg#name"/> للإشارة حسب الحاجة. يمكنك أيضًا تضمين SVG مفرد مباشرة في HTML. بالإضافة إلى ذلك، يمكنك استخدام أدوات (مثل مولدات iconfont) لإنشاء مجموعات فرعية مخصصة.س هل يمكن استخدام أسماء فئات Bootstrap Icons وFont Awesome معًا؟
ج نحويًا، يمكنك استيراد كلتا المكتبتين، لكن انتبه للبادئات المختلفة — Bootstrap Icons تستخدم
bi bi-*، وFont Awesome تستخدم fas fa-*. استيراد كلتيهما يزيد من حجم التحميل؛ يُنصح بالتوحيد على واحدة. عند الانتقال من Font Awesome، يمكنك استخدام البحث والاستبدال لتعديل أسماء الفئات دفعة واحدة.س كيف أضمن إمكانية الوصول لأزرار الأيقونات فقط؟
ج ثلاثة حلول: (1) أضف
<span class="visually-hidden">وصف نصي</span> لنص قارئ الشاشة؛ (2) اضبط aria-label="وصف" على وسم <i>؛ (3) غلّف بـ <a> أو <button> وقدّم تلميحًا عبر سمة title. الحل (1) مُوصى به لأفضل توافق.س هل يمكن تراكب الأيقونات أو دمجها؟
ج نعم. استخدم
position-relative + position-absolute لتراكب الأيقونات. مثلًا، ضع bi-dot-fill في الزاوية العلوية لـ bi-envelope للإشارة إلى رسائل غير مقروءة. يمكنك أيضًا استخدام خصائص CSS mask أو background لتركيبات أكثر تعقيدًا.📖 ملخص
- Bootstrap Icons هي مكتبة أيقونات SVG رسمية، تُستورد عبر
bootstrap-icons.css - استخدم صياغة
<i class="bi bi-{name}"></i>؛ اللاحقة-fillللنسخة الممتلئة - يمكن التحكم بحجم الأيقونات بـ
fs-*ولونها بـtext-* - سيناريوهات التطبيق الشائعة: الأزرار، مجموعات القوائم، التنبيهات، البطاقات، شريط التنقل
- طريقة SVG (
<use>) توفر تحكمًا أكثر مرونة في العرض، وتدعم الألوان المتعددة والأنماط المخصصة
📝 تمارين
- ⭐ أنشئ شريط تنقل مع إضافة أيقونة قبل كل من 5 روابط: Home (house)، Products (box)، About (info-circle)، Blog (file-text)، Contact (envelope).
- ⭐⭐ أنشئ مجموعة أزرار: Search (search)، Add (plus-lg)، Edit (pencil)، Delete (trash)، Download (download) — كل زر بأيقونة ونص مقابل.
- ⭐⭐⭐ عدّل مثال Alert سابق لتضمين أيقونات: Success يستخدم
bi-check-circle-fill، Danger يستخدمbi-exclamation-triangle-fill، Info يستخدمbi-info-circle-fill، وأضف تأثير حركة تلاشي تدريجي.
الدرس السابق: الأكورديون · الدرس التالي: الفئات المساعدة
