الدرس 4: استخدام مكتبة “Font Awesome”

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

سنقوم بالتوضيح أكثر لا تقلق 🙂

 

ما هي الفائدة من استخدام  “Font Awesome” ؟

– توفر مجموعة كبيرة جداً ومتنوعة من الأشكال والأيقونات المفيدة في تصميم المواقع.

– سرعة كبيرة بحيث يتم التعامل معها على اساس خطوط وليس صور.

– يمكن تطبيق خصائص الخطوط عليها من تغير الحجم واللون.

 

2015-11-20

جزء بسيط من الأيقونات التي يوفرها “Font Awesome”

 

ما هي طريقة استخدام  “Font Awesome” ؟

– الدخول على الموقع الرسمي لهذه المكتبة لتحميلها من هنا.

– بعد تحميل النسخة سنجد عدة مجلدات سنقوم باستخدام مجلد CSS و مجلد Fonts.

حيث نقوم بنسخ هذه المجلدات ضمن مجلد الموقع الذي نعمل عليها

– نقوم باستدعاء ملف “font-awesome.css” الموجود ضمن المجلد CSS .

 

وهكذا نكون انتهينا من اعداد المطلوب، والآن كيف نقوم باستخدام الأيقونات ضمن عملنا؟

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

– نختار الأيقونة المناسبة لنا وبالضغط عليها يظهر الكود أو الرمز الموافق لها، كالتالي.

<i class="fa fa-battery-three-quarters"></i>

– نقوم بنسخ هذا الكود داخل ملف الـ “HTML”  ليظهر لدينا بالشكل التالي.

2015-11-22 (1)

  

كمثال آخر يمكن ملاحظة أيقونة الصفحة الرئيسية في شريط الموقع.

إذا واجهتكم أي مشاكل في التركيب أو أي استفسار أخر يمكنكم ترك تعليق هنا أو على الفيسبوك.

شارك برأيك