في هذا الدرس 6تصفّح المواضيع
في الإصدار الرابع من بوتستراب لم تكن هناك مكتبة أيقونات مدمجة بعد إزالة حزمة Glyphicons القديمة، مما اضطر المطورين للاعتماد الكلي على حزم خارجية. أما اليوم فيرافق بوتستراب 5 مكتبة رسمية مفتوحة المصدر تحمل اسم Bootstrap Icons وتضم أكثر من 2000 أيقونة متجهية مرسومة على شبكة قياسية 16x16 بكسل لتتناغم بصرياً مع كافة المكونات.
توزع هذه المكتبة كحزمة مستقلة عن ملف bootstrap.min.css الأساسي حتى لا يتحمل مشروعك وزن مئات الأيقونات إن لم يحتج إليها، ويمكنك تضمينها إما كملف خط ويب جاهز أو كعناصر <svg> مدمجة مباشرة.
الطريقة الأسرع لاستخدام الأيقونات في النماذج الأولية ولوحات التحكم هي ربط ملف bootstrap-icons.min.css داخل وسم <head>، ثم إدراج عنصر <i> أو <span> يحمل الكلاس الأساسي bi متبوعاً باسم الأيقونة مثل bi-shield-lock أو bi-check-circle-fill.
توفر معظم الأيقونات نسختين بصريتين: النسخة المفرغة المحيطة مثل bi-bell للواجهات الهادئة، والنسخة الممتلئة المنتهية بلاحقة -fill مثل bi-bell-fill لإبراز الحالات النشطة والتنبيهات.
<p class="h4">
<i class="bi bi-shield-check" aria-hidden="true"></i>
Verified Connection
</p>
<p class="lead">
<i class="bi bi-bell-fill" aria-hidden="true"></i>
Instant System Alerts
</p>إذا كان موقعك العام لا يستخدم سوى خمس أو ست أيقونات فقط، فإن تحميل ملف خط كامل يتجاوز مئة كيلوبايت يُعد هدراً غير مبرر للشبكة. البديل الاحترافي الأسرع أداءً هو نسخ شيفرة <svg> الخاصة بالأيقونة المطلوبة ولصقها مباشرة في مكانها داخل HTML.
تتميز أيقونة <svg> المباشرة بعدم انتظار طلب خط خارجي وبضبط خاصية fill="currentColor" افتراضياً، فتلون مساراتها تلقائياً بلون النص المحيط بها في اللحظة الأولى لظهور الصفحة.
<p class="h4">
<svg xmlns="http://www.w3.org/2000/svg"
width="20" height="20" fill="currentColor"
class="bi bi-circle-fill" viewBox="0 0 16 16"
aria-hidden="true">
<circle cx="8" cy="8" r="8"/>
</svg>
Zero-Latency Inline SVG
</p>تُعامل أيقونات الخط bi-* تماماً كالحروف النصية في CSS؛ فبمجرد وضعها داخل عنوان كبير مثل .display-5 أو .h2 أو تغيير خاصية font-size وcolor على العنصر الأب، يتغير حجم الأيقونة ولونها فوراً وبنفس النسبة دون أي فقدان في حدة الحواف.
أما في حالة عناصر <svg> المباشرة، فيمكنك التحكم في أبعادها عبر سمتي width وheight بالبكسل أو بوحدة 1em لتكبر وتصغر ديناميكياً مع حجم خط العنصر المحيط.
تنقسم الأيقونات من منظور إمكانية الوصول إلى فئتين حاسمتين لا يجوز الخلط بينهما:
- أيقونة تزيينية بجانب نص ظاهر: عندما تضع أيقونة بجانب عبارة واضحة مثل «حفظ التعديلات»، أضف سمة
aria-hidden="true"على عنصر الأيقونة حتى يتجاهلها قارئ الشاشة ويكتفي بقراءة النص الواضح. - أيقونة دلالية مستقلة بدون نص: عندما تعرض أيقونة حذف أو بحث بمفردها دون كلمة مكتوبة بجوارها، يجب تزويد العنصر التفاعلي الأب (أو غلاف الأيقونة المزود بـ
role="img") بسمةaria-labelتشرح وظيفتها بوضوح تام.
<!-- 1. Decorative icon beside text -->
<p><i class="bi bi-globe" aria-hidden="true"></i> Docs</p>
<!-- 2. Standalone icon with aria-label -->
<a href="#search" aria-label="Open site search">
<i class="bi bi-search" aria-hidden="true"></i>
</a>عند تعريب الواجهات إلى اتجاه RTL، لا يجوز عكس جميع الأيقونات عشوائياً بقاعدة تحويل واحدة! بل يجب التمييز بدقة بين الأيقونات الاتجاهية المرتبطة بتدفق القراءة والزمن (مثل أسهم «التالي» و«السابق» وأيقونات المحاذاة وقوائم التعداد) التي تنعكس في العربية لتشير نحو اليسار للتقدم، وبين الأيقونات العالمية الثابتة التي يحرم قلبها أفقياً مثل علامة الصح bi-check-lg وعقارب الساعة bi-clock والعدسة المكبرة والشعارات التجارية.
يلخص الجدول التالي قواعد اختيار وتنسيق وإتاحة الأيقونات في بوتستراب 5.3:
| أسلوب التضمين أو القاعدة | الصيغة القياسية | متى نختاره؟ |
|---|---|---|
خط الأيقونات Web Font | <i class="bi bi-gear"></i> | لوحات التحكم الغنية بعشرات الأيقونات المتنوعة |
متجه Inline SVG | <svg class="bi" fill="currentColor"> | صفحات الهبوط السريعة التي تحتاج عدداً محدوداً من الأيقونات |
| الأيقونة التزيينية المرافقة لنص | aria-hidden="true" على الأيقونة | منع تكرار أو تشويش القراءة الصوتية بجانب النص المرئي |
| الأيقونة المستقلة بدون نص | aria-label="..." على الأب + aria-hidden="true" | تمكين المكفوفين من معرفة وظيفة زر البحث أو الإغلاق |
اتجاه الواجهة العربية RTL | عكس أسهم التقدم والرجوع فقط | الحفاظ على صحة علامة الصح والساعة والرموز العالمية |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: تعرفت في هذا الدرس على مكتبة أيقونات بوتستراب الرسمية وطريقتي تضمينها عبر ملف خط الويب أو عناصر SVG المباشرة، وكيفية تحجيمها وتلوينها بالوراثة، وضبط إتاحتها لقارئات الشاشة واتجاهاتها في الواجهات العربية.
الخطوة التالية والدرس القادم
انتقل الآن إلى بداية موديول الأدوات المساعدة مع درس «الألوان والخلفيات في بوتستراب 5» لإتقان لوحة الألوان الدلالية والخلفيات الناعمة وفاحص التباين الذكي.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Bootstrap Icons مكتبة أيقونات بوتستراب
- المكتبة الرسمية مفتوحة المصدر لأيقونات بوتستراب 5 وتضم أكثر من 2000 أيقونة متجهية مصممة على شبكة 16x16 بكسل.
- للمراجعة
- 02 currentColor Keyword الكلمة المفتاحية للون الحالي
- قيمة قياسية في CSS تجعل تعبئة مسار SVG ترث تلقائياً لون النص المحسوب للعنصر الأب.
- للمراجعة
- 03 Decorative Icon الأيقونة التزيينية
- أيقونة مرافقة لنص مرئي واضح وتُزود بسمة aria-hidden="true" لإخفائها عن قارئات الشاشة ومنع التكرار.
- للمراجعة
- 04 Directional Icon الأيقونة الاتجاهية
- أيقونة سهم أو مسار تشير للتقدم أو الرجوع ويلزم عكس اتجاهها بين الواجهة الإنجليزية والواجهة العربية.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 SVG SVG
- Scalable Vector Graphics
- صيغة رسوم متجهية تحافظ على دقة وحدّة أيقونات بوتستراب عند أي حجم تكبير أو شاشة عالية الكثافة.
- للمراجعة
- 02 ARIA ARIA
- Accessible Rich Internet Applications
- توفر سمات aria-hidden لإخفاء الأيقونات التزيينية وaria-label لوصف الأيقونات التفاعلية المستقلة.
- للمراجعة
- 03 WOFF2 WOFF2
- Web Open Font Format 2
- صيغة ملفات الخطوط المضغوطة عالية الكفاءة التي يستدعيها ملف تنسيقات خط الأيقونات.
- للمراجعة
- 04 FOIT FOIT
- Flash of Invisible Text
- لحظة اختفاء الرموز ريثما يكتمل تحميل ملف الخط الخارجي، ويمكن تفاديها تماماً بتضمين SVG المباشر.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
أنشئ عنواناً بكلاس h3 وفقرة استهلالية بكلاس lead يسبق كلاً منهما أيقونة من مكتبة Bootstrap Icons مع إضافة سمة aria-hidden="true" للأيقونتين.
-
اكتب وسم رابط <a> يحتوي فقط على أيقونة بحث bi-search وزوّد الرابط الأب بسمة aria-label توضح وظيفته لقارئات الشاشة.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي8 أسئلة تنتظرك ＋
ما الكلاسان اللذان يُدمجان معاً على وسم <i> لعرض أيقونة عبر ملف خط Bootstrap Icons؟
يُدمج الكلاس الأساسي .bi مع كلاس اسم الأيقونة مثل .bi-check-circle.
كيف ترث أيقونة <svg> المدمجة مباشرة لون النص الخاص بالعنصر الأب تلقائياً؟
عبر ضبط سمة fill="currentColor" على عنصر svg ليرث لون الخط المحسوب للأب.
هل تأتي مكتبة Bootstrap Icons مدمجة تلقائياً داخل ملف bootstrap.min.css الأساسي؟
خطأ؛ تُوزع مكتبة Bootstrap Icons كحزمة مستقلة حتى يبقى ملف التنسيقات الأساسي خفيف الوزن.
ما السمة الواجب إضافتها لأيقونة تزيينية موضوعة بجانب نص واضح ومقروء؟
تخفي سمة aria-hidden="true" الأيقونة التزيينية عن قارئات الشاشة لمنع التشويش الصوتي.
عند إنشاء رابط يحتوي على أيقونة بحث فقط دون نص ظاهر، كيف تجعله مفهوماً لقارئات الشاشة؟
بإضافة سمة وصفية صريحة aria-label على عنصر الرابط التفاعلي <a> مع إبقاء aria-hidden="true" على الأيقونة.
هل يجب قلب أيقونة علامة الصح (bi-check-lg) أو الساعة (bi-clock) أفقياً في الواجهات العربية RTL؟
خطأ؛ الرموز العالمية غير المتماثلة كعلامة الصح وعقارب الساعة تبقى ثابتة ولا يُعكس إلا أسهم الاتجاه والتنقل.
لماذا قد تفضل تضمين عناصر <svg> مباشرة بدلاً من تحميل ملف خط bootstrap-icons.min.css في صفحة هبوط؟
لأن تضمين بضع أيقونات SVG مباشرة يلغي تحميل ملف خط كامل ويضمن الرسم الفوري بصفر طلبات إضافية.
على أي شبكة أبعاد قياسية صُممت مسارات أيقونات Bootstrap Icons افتراضياً؟
صُممت جميع أيقونات المكتبة الرسمية على شبكة متناسقة بأبعاد 16x16 بكسل.