فاصلة
  • CSS
  • ?
    : ترتيب الدرس
  • 13
    عدد الدروس
  • ?
    أخر تحديث

الأيقونات في لغة CSS

الأستخدام الصحيح للأيقونات في الموقع يعطي لمسة جميلة للتصميم وسهولة التعامل مع الموقع من اتجاة المستخدم ,وهي جزء هام جداً في واجهة المستخدم ,

الأيقونة : هي صورة مصغرة  لتوضيح المعني

ولنفترض الأن انك قمت بتصميم موقع يحتوي علي 5 صفحات بالأسماء التالية

  • الصفحة الرئيسية : هي الواجهة الرئيسية للموقع
  • صفحة اتصل بنا : هي صفحة تمكن المستخدم من اجراء اتصال مع الموقع
  • صفحة بروفايل المستخدم :  صفحة لعرض صورة المستخدم ومعلومات عنة
  • صفحة ارسال رسالة للمستخدم : صفحة تواصل بينك وبين مستخدم اخر
  • صفحة البحث في الموقع : هي صفحة للبحث في الموقع

الان سوف نقوم بأزالة الشرح الخاص بكل صفحة وأضافة ايقونة لتوضيح المعني

  • الصفحة الرئيسية
  • أتصل بنا
  • صفحة بروفايل المستخدم
  • صفحة ارسال رسالة للمستخدم
  • صفحة البحث في الموقع

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

 


مكتبة FontAwesome

هي مكتبة كبيرة تحتوي علي عدد كبير جداً من الأيقونات ,ولكن قبل أي شي يجب أن تقوم بربط المكتبة بالتصميم الخاص بك في الموقع ,وكل ايقونة في المكتبة تحتوي علي أسم فريد لا يتكر ,وهو الأسم الذي سنختار الأيقونة عن طريقة

قبل اي شيء يجب ان تقوم بأضافة رابط الي موقعك يقوم بأستدعاء المكتبة ,ولأننا سنتعامل مع مكتبة Fontawesome  ,سوف نقوم بزيارة الموقع الرسمي للمكتبة والحصول علي الرابط وتصفح الأيقونات ,

الان سوف نقوم بأضافة الرابط التالي بين وسمي head , لأجراء طلب للأيقونات التي في الموقع ,وبعد اضافة الرابط إلي صفحتك يكون موقعك مرتبط بالمكتبة وكل ما عليك فعلة هو أختيار الأيقونة التي تريد أضافتها وتقوم بأختيارها

<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>

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

والأن بما أن موقع فاصلة بالفعل مرتبط بمكتبة fontawesome سوف نقوم بأختيار أيقونة من الموقع وأضافتها هنا ,كالتالي

<i class="fas fa-apple-alt"></i>
ايقونة علي شكل تفاحة
 
أساسيات التضمين الألوان الخلفيات الحدود الهوامش الهوامش الداخلية العرض والأرتفاع الصناديق حدود خارجية النصوص الخطوط الأيقونات