اضافة ايقونات في الموقع عبر اكواد html
السلام عليكم، في الدرس السابق في سلسلة html تعلمنا بعض اكواد html وميزة التنقل
داخل الموقع بid وبواسطتها برمجنا قسم المحتوى الرئيسي في الموقع وتبقى لنا جزء
الفوتر فقط وفي هذا الجزء سنضيف بعض الأيقونات فيه ولهذا قررت ان اشرح طريقة اضافة
ايقونة في الموقع قبل درس الفوتر. 
ايقونات في الموقع:
تكتب في المحرر على شكل كود وتظهر في المتصفح على شكل ايقونة ولكن نحن لن نكتب
تلك الأكواد وتظهر الأيقونة هذا مستحيل المستحيلات السبع ولهذا علينا استعمال css
ولكن لاتخافوا لن نكتب تلك الأكواد لأننا اصلا لم نبدأ بسلسلة css ولهذا هناك
مكتبة باسم font awesome توفر تلك الأكواد بدون معرفة فيها ولكن تلك الاكواد
كبيرة وكثيرة جدا فلهذا نحن سنستخدم كود تعلمناه في بداية السلسلة وهو كود تحميل
اكواد css الخارجية.
طريقة اضافة مكتبة font awesome:
طريقة سهلة جدا ولكن هناك مشكل وهو أن هذه المكتبة توفر اصدرات عديدة وٱخر اصدار
هو الإصدار الخامس ونحن سنعطيكم كود الإصدار 4 لجودته ولكن ان استعملته مع كود ايقونة الاصدار 3 ماأقل او 5ومافوق ممكن ان تحصل مشاكل في الموقع او لن تظهر الأيقونة فهناك من خسر قوالبهم بسبب
هذا المشكل الذي لديه حل وحله هو ان تبدل الأكواد القديمة بالجديدة
الطريقة
- قم بدخول الى الى ملفك عبر محرر الأكواد
- وقم بالبحث عن الوسم التالي.
<head>
عند ايجاده قم بوضع الكود التالي اسفله.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>
شرح الكود
هنا في الكود (link) يوجد rel يساوي stylesheet ويقصد هنا ان الرابط هو رابط ملف css خارجي ويوجد href الذي يساوي ذلك الرابط.
طريقة اضافة ايقونة للموقع
قم بذهاب الى مكتبة ايقونات font awesome.
- اختر الأيقونة الذي تريد ثم اضغط عليها سيظهر لك رابط هذه الايقونة على شكل التالي.
<i class="fa fa-home" aria-hidden="true"></i>
قم بنسخه وباستخدامه في مكان الذي تريده في موقعك.
شرح الكود
هنا في الكود (i) لديه class يساوي fa fa-home والأيقونة تحدد عبر الclass وهنا لتغيير الأيقونة يجب عدم لمس fa fa- وتغيير كلمة home بمعرف الأيقونة ولكن لايجب عليك فعل كل هذا كل ماعليك فعله هو الذهاب الى الرابط السابق واختيار الأيقونة او البحث عنها ثم ستحصل على الكود كامل
ويوجد ايضا aria-hidden وهذا الاعداد لن تحتاجه في الإبتدائية العمل وان اردتم شرحه فانا مستعد ولكن لو نرجع للبداية نلاحظ اننا استخدما كود i ولم نستعمل كود ٱخر
السبب ان i هو الكود الأصلي المسؤول عن الأيقونات ولكن يوجد كود ٱخر وهو span وهذا الكود ليس مهمته فقط اضافة ايقونة في الموقع فهذا الكود يمكنك اضافته داخل اي كود مثل كود p ولن يسبب لك مشاكل فلو وضعت كود ٱخر مثل div داخل p ستأخذ كلمة او ايقونة سطرا كاملا وهذا ليس جيدا فإذا لاضافة ايقونة تتوفر لك كودين ونحن ننصح بكود i ولكن حسب القالب واكواده
ملاحظة في الرابط الرسمي الذي وضعته ستواجه مشكل كبير في الموقع وهو شكله البشع ولهذا ان اردتم ان اوفر صفحة في مدونتي توفر كل الأيقونات للحل فإطلبو مني في التعليقات
والى هنا قد انتهينا من درس اليوم انتظرونا في دروس قادمة انشاء الله وكما قلنا أننا سنستعمل هذا الدرس في الدرس القادم
akram lam
طالب ومصمم ومطور في xml وhtml
