مكتبة MATERIAL ICONS شرح التركيب والإستخدام علي بلوجر

 شرح طريقة تركيب وإستخدام مكتبة Material Icons المدعومة والمطورة من Google وتتميز المكتبة بأنها مجانية ولا تحتاج الي اي تراخيص اسناد واكثر دناميكية ولا تؤثر علي سرعة المدنة لأن حجها لا يتعدي 1 KB.


تركيب مكتبة Material Icon علي بلوجر 

تركيب مكتبة Material Icon سهل جداً ويشبة مكتبة Fontawesome كما انها تتبع نفس التقنية ولكن مكتبة Material Icon تعمل بشكل اسرع عن مكتبة Fontawesome.
ابحث عن وسم </head> اسفله اي بعده قم بوضع رابط المكتبة التالي

<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/> 
والأن بعد الحفظ يمكنك استخدام جميع ايقنونات Material Design Icons في مشاريعك بشكل مجاني وبدون اي ترخيص فقط ان لا تقوم ببيعها لان ذالك يتعدي سياسة الإسخدام 

استخدام ايقونات مكتبة Material Icon

تتميز واجهة Material Icon بسهولة التعامل والإستخدام عن مكتبة Fontawesome ومحرك البحث الذي يساعدك في الحصول علي اي ايقنونة تبحث عنها بسهولة لأستخدما مباشرةً او تحملها بأحدي الصيغتين اما SVG او Png مع إمكانية تغير حجمها ولونها.
تركيب-مكتبة-Matrial-Icon
لإضافة ايقونات مكتبية Matrial Icon يجب استخدمها كالتالي:

<span class="material-icons">IconName</span>
مع استبدال IconName بأسم الأيقونة المراد استخدمها, كما يمكنك ايضاً استخدمها بهذا الشكل:

<i class="material-icons">IconName</i>

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

tag_faces

<i class="material-icons size-14 orange">tag_faces</i>

tag_faces

<i class="material-icons size-22 red">tag_faces</i>

tag_faces

<i class="material-icons size-26 blue">tag_faces</i>

face

<i class="material-icons md-dark">face</i>

face

<i class="material-icons md-dark md-inactive">face</i>
لاحظ اننا في كل مرة كنا نقوم فقط بتغير حجم ولون الأيقونة عن طريق اختيار اسم اللون مع ترك مسافة بينهم كذالك تكون طريقة استخدام مكتبية Material Icon

يمكنك ايضاً استخدام Material Icon بأستعمال CSS فقط عن طريق 
:bfore او :after
هذا فقط ما نحتاجه في منصة بلوجر لدينا ولكن إمكانية المكتبة لم تنتهي الي هنا فهي تعمل ايضاً علي أجهزة الجوال يمكنك الإطلاع علي المزيد عن المكتبة من هنا

الأن قد نكون وصلنا إلي نهاية الدرس والي اللقاء في دروس جديدة إن شاء الله

لا تنسى مشاركة هذا المقال!

أعط رأيك حول هذا المقال

الأشعارات
هنا تقوم بوضع الأشعارات
حسناً