CSSالأيقونات

مفهوم الأيقونات
أنواع الأيقونات
إضافة صورة كأيقونة
إستخدام أيقونات جوجل
إستخدام أيقونات FontAwesome

مفهوم الأيقونات

الأيقونة ( Icon ) في عالم الويب هي رسمة أو صورة تعبّر عن شيء ما و هي تعطي شكل رائع للتصميم.

في هذا الدرس ستتعرف على أنواع الأيقونات التي يمكنك استخدامها في صفحات الويب بالإضافة إلى استخدام أيقونات مجانية رائعة و تحديد أحجامها و ألوانها.

أنواع الأيقونات

الأيقونة يمكن أن تكون أحد الأنواع التالية:

صورة عادية كالصور التي نوعها PNG و التي يمكن أن تكون خلفيتها شفافة.
صورة نوعها SVG.
صورة مبنية بوسوم HTML و خصائص CSS.

إضافة صورة كأيقونة

في المثال التالي قمنا بإضافة صورة عادية كأيقونة بواسطة الوسم <img>.

مثال

جرب الكود

في المثال التالي قمنا بإضافة صورة عادية كخلفية لوسم فارغ كأيقونة بواسطة الخاصية background-image.

مثال

جرب الكود

إستخدام أيقونات جوجل

أيقونات جوجل رائعة بكل ما للكلمة من معنى فهي مجانية بشكل كامل و هي تتيح لك التلاعب بخصائص الأيقونات كلونها و حجمها و حتى تصميمها.

طريقة تضمين أيقونات جوجل

هناك طرق عديدة لتضمين أيقونات جوجل في صفحات الويب أسهلها وضع رابط ملف الـ CSS التالي الخاص بها في الوسم <head>.

طريقة عرض أيقونات جوجل

أسهل طريقة لفعل ذلك هي عن طريق استخدام وسم يملك كلاسات تشير لإسم الأيقونة كالتالي.

مثال

<head>

</head>

<body>

home

person

favorite

menu

search

</body>

<head> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body> home person favorite menu search </body>

جرب الكود

طريقة تحديد حجم و لون الأيقونات

في المثال التالي قمنا بتحديد ألوان و أحجام الأيقونات بواسطة خصائص CSS.
فعلياً جعلنا حجمها جميعاً 30 بكسل.
ثم قمنا بتعريف كلاسات تمثّل ألوان و أضفنا كلاس منهم لكل أيقونة حتى يتم تلوينها.

مثال

.material-icons {

font-size: 30px;

}

.blue {color: blue;}

.brown {color: brown;}

.red {color: red;}

.purple {color: purple;}

.material-icons { font-size: 30px; } .blue {color: blue;} .brown {color: brown;} .red {color: red;} .purple {color: purple;}

جرب الكود

لمزيد من التفاصيل و الأيقونات التي يوفرها لك جوجل قم بزيارة الموقع الرسمي الخاص به.

موقعه الرسمي

إستخدام أيقونات FontAwesome

FontAwesome يُعتبر أشهر موقع يمكن الحصول منه على أيقونات مجانية حيث أن أيقوناته مميزة جداً لأنه يمكن التعامل معها و كأنها نص عادي يمكن تحديد حجمه و لونه بواسطة الخاصيتين color و font-size.

طريقة تضمين أيقوناته

هناك طرق عديدة لتضمين أيقونات FontAwesome في صفحات الويب أسهلها وضع رابط ملف الـ CSS الخاص بها من شبكة cloudflare العالمية.

فيما يلي رابط الإصدار 6.2.0 من ملف الأيقونات الذي يجب إضافته بداخل الوسم <head>.

طريقة عرض أيقوناته

أسهل طريقة لفعل ذلك هي عن طريق استخدام وسم يملك كلاسات تشير لإسم الأيقونة كالتالي.

مثال

<head>

</head>

<body>

</body>

جرب الكود

طريقة تحديد حجم و لون الأيقونات

في المثال التالي قمنا بتحديد ألوان و أحجام الأيقونات بواسطة خصائص CSS.

مثال

.fa-solid {

font-size: 20px;

}

.fa-user {color: blue;}

.fa-house {color: brown;}

.fa-heart {color: red;}

.fa-bars {color: purple;}

.fa-solid { font-size: 20px; } .fa-user {color: blue;} .fa-house {color: brown;} .fa-heart {color: red;} .fa-bars {color: purple;}

جرب الكود

لمزيد من التفاصيل و الأيقونات التي يوفرها لك Fontawesome قم بزيارة الموقع الرسمي الخاص به و حدد رقم إصدار الأيقونات التي تريد استخدامها ثم حدد أنك تريد الأيقونات المجانية.

موقعه الرسمي

CSSالأيقونات

مفهوم الأيقونات

أنواع الأيقونات

إضافة صورة كأيقونة

مثال

مثال

إستخدام أيقونات جوجل

طريقة تضمين أيقونات جوجل

طريقة عرض أيقونات جوجل

مثال

طريقة تحديد حجم و لون الأيقونات

مثال

إستخدام أيقونات FontAwesome

طريقة تضمين أيقوناته

طريقة عرض أيقوناته

مثال

طريقة تحديد حجم و لون الأيقونات

مثال

هدف الموقع

روابط مهمة

حقوق النشر

الدورات

أدوات مساعدة

أقسام الموقع

إبحث