شرح مبسط لتبديل ايقونات fontawesome بMaterial Icons
السلام عليكم متابعينا من كل انحاء الوطن العربي اليوم درس بسيط جدا عن اذا تريد وضع ايقونات الماتريال الخاصة بجوجل , كما قلنا في دروس سابقة ان الاختلاف لابد منه ويجب ان يكون موقعك متخلف عن أي موقع حتي ولو باشياء بسيطة فمثلا رأيت ان معظم الويب العربي يستخدم مكتبة fontawesome لانها بالتأكيد مكتبه لابد من جودها في اي موقع ولكن ال Material Iconsهي ايقونات من جوجل وتتميز بالسرعة مثل ال fontawesome , وشرح اليوم سيطبق علي ايقونة ال Home الرئيسية في قالب سكويز في قالب سكويز ايقونة الرئيسية مثل هذه الصورة
كما ترون في الصورة هذه ايقونة ال home الخاصة بقالب سكويز , ولكن في الصوره الثانيه عند وضع ايقونة ال Home الخاصه ب Material اختلفت قليلا وقم بالاطلاع علي هذه الصورة لتتأكد
كما ترون , الايقونة الرئيسية الاصلية الخاصة بقالب سكويز هي FontAwesome , أما ايقونة الرئيسية الخاصة بمستر عربكو هي Material Icons
كيف تبدل ايقونة الرئيسية الي ايقونات الماتريال
لنتجه الي الشرح
اولا يجب ان يكون لديك كود مكتبة ايقونات الماتريال وهذا الكود وضعناه سابقا في اكواد هامة للمصممين ,هذا هو كود مكتبة Material Icons قم بفتح المظهر ثم وضع الكود بعد <head>
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'/>
بهذه الطريقة انت وضعت مكتبة ال ماتريال في موقعك لنذهب لتبديل الايقونة لمستخدمي قالب سكويز , الايقونات لها معرفين , معرف بالاسم بمعني ان ايقونة الرئيسية في مكتبة fontawesome تكتب هكذا ( fa-home) < ومعرف بالارقام وهذا في قالب سكويز اي ان ايقونة الرئيسية تضع بهذا الكود ايضا وهو المعرف الثاني (f015) , وهذه الاكواد انت تعرفها من صفحة fontawesome الرئيسية , ستبحث في قالبك عن الكود الخاص بالايقونة ستبحث عن هذا الكود ( f015) ستجد الكود مثل هذه الصورة
بعدها قم بفتح مكتبة ايقونات الماتريال لمعرفة اكواد الايقونات ستجدا الكود الاصلي الذي بحثنا عنه وبجانبه ال font-family التي ستكون
FontAwesome ,
قم بتغييرها الي Material Icons
لتصبح بهذا الشكل : font-family:Material Icons
انظر لهذه الصورة
وقم بتغيير الكود الخاص بالايقونه بــ الكود الخاص بايقونات الماتريال فمثلا كود الرئيسية في ايقونات الماتريال معرف بهذا الكود (e88a) قم بوضعه بدلا من (f015) وتغيير ال font-family كما في الأعلي وقم بحفظ القالب وستتغير ايقونة ال fontawesome بايقونه الماتريال ,