شرح صفوف ومحتوى الفقرة
عند تعريب الواجهات إلى اتجاه 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» لإتقان لوحة الألوان الدلالية والخلفيات الناعمة وفاحص التباين الذكي.