الخط رائع

تضمين Font Awesome في مشروعك:
أضف هذا السطر إلى

استخدم أيقونة

لاستخدام رمز، أضف عنصر أو بالفئات المناسبة:

أيقونات المواد

تضمين أيقونات المواد في مشروعك:
أضف هذا السطر إلى

استخدم أيقونة

لاستخدام رمز، أضف عنصر مع أيقونات مادة الفصل واسم الرمز:

camera_alt

2. استخدام CSS للأيقونات المخصصة

يمكنك أيضًا إنشاء أيقوناتك الخاصة باستخدام CSS. إليك مثال بسيط باستخدام CSS خالص:

إنشاء بنية HTML أساسية

إضافة CSS لتصميم الأيقونة الخاصة بك

.icon-star {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid gold;
    position: relative;
    transform: rotate(35deg);
}


.icon-star:before {
    content: '';
    position: absolute;
    top: 0;
    left: -50px;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid gold;
    transform: rotate(-70deg);
}

ينشئ مقتطف CSS هذا شكل نجمة بسيطًا باستخدام الحدود وتحديد المواقع.

3. أيقونات SVG

يمكنك أيضًا استخدام ملفات SVG للأيقونات عالية الجودة:

SVG مضمنة

استخدام SVG كصورة خلفية

.icon {
    width: 24px;
    height: 24px;
    background: url('data:image/svg xml;base64,...') no-repeat center center;
    background-size: contain;
}

نصائح

الحجم واللون: بالنسبة لأيقونات الخطوط وملفات SVG المضمنة، يمكنك ضبط الحجم باستخدام حجم الخط أو خصائص العرض والارتفاع، وتغيير اللون باللون أو التعبئة لملفات SVG.
إمكانية الوصول: ضع في اعتبارك دائمًا إمكانية الوصول عن طريق إضافة نص وصفي أو سمات الأغنية عند الحاجة.
لا تتردد في تجربة ومزج الطرق المختلفة للعثور على أفضل ما يناسب مشروعك!