كيفية وضع أيقونات بجانب أقسام الموقع

كيفية وضع أيقونات بجانب أقسام الموقع

شرح لوضع أيقونات بجانب أقسام المدونة او الموقع لمدونات بلوجر 


كيفية وضع أيقونات بجانب أقسام الموقع


وضع أيقونات بجانب أقسام الموقع

هذا الدرس لك ♥ :- شرح الأكواد المهمة في قوالب بلوجر 
السلام عليكم متابعينا اليوم درس طلبه العديد من متابعي الموقع الكرام وهو كيفية وضع ايقونة بجانب روابط أقسام الموقع والصراحة هذه طريقة تعطي شكل جيد للموقع واليوم سأقول لك كيفية وضع ايقونات بجانب قسم المدونة مع تلوين كل أيقونة بـاللون الذي تختاره بطريقة بسيطة ولن تؤثر علي سرعة الموقع نهائيا وهذه صورة معاينة للايقونات.

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

شرح اضافة ايقونات بجانب الاقسام

قبل الدخول في الشرح تأكد من اضافة أخر اصدارات مكتبة FontAwesome وطريقة اضافة المكتبة لموقعك سهلة جدا كل ماعليك هو الدخول للمظهر ثم تعديل HTMLثم وضع هذا الكود الخاص بالمكتبة أسفل <head> 
    <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css' rel='stylesheet code-box'/>
وقم بحفظ القالب وبهذه الطريقة تكون اضفت مكتبة الايقونات لمدونتك بطريقة صحيحة 
الخطوة القادمة هي مضمون الدرس يجب التركيز في هذا الجزء للمبتدئين ، انا ساذهب للتخطيط لكي اضيف قسم جديد في قائمة المدونة سأضيف قسم شروحات وسأكتب أسم التسمية بهذا الشكل :- 
  code-boxشروحات <i class="fab fa-windows"style="color: #0abde3;"></i>

كلمة شروحات هي أسم القسم وكود #0abde3 هو لون الاضافة وكلمة fab fa-windows هي الأيقونة واسم الايقونة وهذه صورة مثال لطريقة وضع الاضافة 

وقم بحفظ القسم وستجد ان كلمة شروحات بجانبها اسم الايقونه التي وضعتها واللون الذي اخترته , شي أيضا مهم وهو كيف اعرف أسماء باقي الايقونات ؟ سؤال جيد كل ماعليك هو الاتجاه للصفحة الرسمية لمكتبة fontawesome ستجد هذه الصورة 

سنختار مثلا ايقونة Apple كل ماعليك هو نسخ اسم Class الخاص بالايقونه مثل هكذا


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

ارسال تعليق

أحدث أقدم