انتقل إلى محتوى الدرس

Sizing and Coloring Icons تحجيم وتلوين الأيقونات

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

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

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

تُعامل أيقونات الخط bi-* تماماً كالحروف النصية في CSS؛ فبمجرد وضعها داخل عنوان كبير مثل .display-5 أو .h2 أو تغيير خاصية font-size وcolor على العنصر الأب، يتغير حجم الأيقونة ولونها فوراً وبنفس النسبة دون أي فقدان في حدة الحواف.

أما في حالة عناصر <svg> المباشرة، فيمكنك التحكم في أبعادها عبر سمتي width وheight بالبكسل أو بوحدة 1em لتكبر وتصغر ديناميكياً مع حجم خط العنصر المحيط.

الصف 2 معاينة حية