انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #2 من درس: مكتبة الأيقونات في بوتستراب 5

Icon Font Stylesheet Setup تضمين ملف خط الأيقونات

تعلّم استخدام مكتبة أيقونات بوتستراب الرسمية عبر ملف خط الأيقونات أو عناصر SVG المتجهية المباشرة، والتحكم في حجمها ولونها، وتطبيق قواعد الإتاحة واتجاه الأيقونات في الواجهات العربية.
2 صفوف تعليمية
بوتستراب 5
2 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

الطريقة الأسرع لاستخدام الأيقونات في النماذج الأولية ولوحات التحكم هي ربط ملف bootstrap-icons.min.css داخل وسم <head>، ثم إدراج عنصر <i> أو <span> يحمل الكلاس الأساسي bi متبوعاً باسم الأيقونة مثل bi-shield-lock أو bi-check-circle-fill.

توفر معظم الأيقونات نسختين بصريتين: النسخة المفرغة المحيطة مثل bi-bell للواجهات الهادئة، والنسخة الممتلئة المنتهية بلاحقة -fill مثل bi-bell-fill لإبراز الحالات النشطة والتنبيهات.

الصف 2 كود برمجي
HTML 
<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>
جرّب بنفسك

جميع فقرات هذا الدرس (مكتبة الأيقونات في بوتستراب 5)