السبت، 19 أغسطس، 2017

شرح مكتبة الأيقونات الخطية FontAwesome مع كيفية الإستخدام الكامل لمميزاتها



السلام عليكم ورحمته الله وبركاته اهلاٌ وسهلاٌ بكم أعضاء موقعنا الكرام تدوينة جديدة سوف نشرح كيفية استخدام مكتبة الأيقونات الخطية Fontawesome ما معنى كلمة خطية بمعنى أدق هى تعتبر ايقونات ولكن لا تكن هيئة صور الذى نراها بل هى عبارة عن ايقونات فى هيئة خطوط يتم تطبيق على نفس خصائص الخطوط الذى توجد فى الويب فى حالة عمل Zoom على المتصفح لم تتأثر جودة الصورة على عكس كبير فى حالة عمل تكبير فى الصور التقليدية يتم تشويه  شكل الصورة وتغيرها الى مربعات (pixels)
وهذا هو الذى يميز هذة المكتبة Fontawesome فى هذا المقال سنشرح هذة المكتبة بالكامل مع المميزات التى توجد بها أولاٌ يجب عليك الدخول الى موقعهم الرئيسى FontAwesome.io إذا أردت تركيب هذة المكتبة فى موقعك يجب عليك الإشتراك فى المكتبة عن طريق إدخال البريد الإلكترونى الخاص بك فى موقعهم.


fontawesome


سوف يرسلو لك على حسابك الذى تم ادخاله من قبلك انت وهو عبارة عن سكربت يتم تركيبه فى أكواد موقعك فوق وسم <head/>
بمجرد تركيبك للسكربت ستصبح  المكتبة كاملاٌ بجميع الأيقونات والمميزات التى تمتلكها المكتبة سوف تكون متاحة لك كاملاٌ
قبل ان نعرف كيف يتم اضافة الأيقونات يجب عليك انت تعرف ان مطورى المكتبة قد صمموا 675 أيقونة فى شتى المجالات يجب إذا اردت تركيب ايقونة فى موقعك فتصفح هذة الصفحة واختر الأيقونة التى تعجبك وإضغط عليها .

fontawesome




ستفتح لك النافذة فستجد هذا الكود امامك إنسخه وضعه فى المكان الذى تريد فى موقعك ضمن الأكواد فى المكان الذى تريده وإذا احببت ان تضعها فى مكان ما ولم تعرف فإضغط على زر الفأرة الايمن ثم اختر فحص العنصر اخر خيار فى القائمة المنسدلة
سوف تجد معرف هذة الواجهة مثل مافى الصورة.



فستضع كود الhtml الذى تم نسخه قبل العنصر المراد ظهور الأيقونة قبله وستجد الأيقونة قد ظهرت بنجاح هذا كان توضيع للطريقة الأولى عن طريق Html يوجد طريقة اخرى عن طريق Before,After تعتبر من العناصر المزيفة بإمكانك إستخدامها فى طريقة الcss وسنشرح بالتفصيل كيفية عملها, كما سترى فى الصورة اسفل كود صغير هذا يسمى Uniqe Code تعنى كود فريد من نوعه يستخدم فى الbefore,After.


ثم يجب عليك تعديل المعرف الذى تم أخذه كما شرحنا فى الصورة من قبل ثم بدل كلمة Example  بالمعرف الخاص بك ثم ضع Uniqe Code الخاص بالأيقونة هنا من ضمن الأكواد

.Example:before{
content:"/f14a";
color:#FFF;
display:inline-block;
font-family:'fontAwesome'
}


ملحوظة : لا تقم بحذف علامة باك سلاش (/)  

الى هنا نكون قد وصلنا الى نهاية التدوينة لاتنسى ان تشتركوا فى القائمة البريدية حتى يصل لك الجديد من المقالات والتدوينات الحصرية فى مكتبة بلوجر وأيضاٌ شاركوا التدوينة مع اصدقائكم فى موقع التواصل الإجتماعى حتى تعم الفائدة واتمنى من الله ان يدخلنا الجنة جميعاٌ مع رسولنا محمد صلى الله عليكم وسلم وأن يرزقنا الفردوس الأعلى سلام عليكم ورحمته الله وبركاته.
0 تعليقات على " شرح مكتبة الأيقونات الخطية FontAwesome مع كيفية الإستخدام الكامل لمميزاتها "