شرح مكتبة font awesome مع التحميل











شرح مكتبة font awesome
الاصدار الحالي font-awesome 4.3.0

ما هي مميزات المكتبة؟
  • One Font, 519 Icons , Update 22/3/2014
    أي تعني بأن المكتبة تتكون من ملف واحد من نوع خط، يحتوي على 519 أيقونة
  • CSS Control
    التحكم في الأيقونات من خلال الـ css بشكل كامل.
  • Infinite Scalability
    سهولة تحجيمها والتلاعب والتحكم بها.
  • Free, as in Speech
    المكتبة مجانية بشكل كامل.
  • IE7 Support
    تدعم متصفح اكسبلورر 7 فما فوق.
  • Perfect on Retina Displays
    ممتازة مع شاشات عالية الدقة والوضوح من نوع رتينا (هي أعلى شاشات وضوحاً).
  • Made for Bootstrap
    تم إنشاؤها لتعمل مع مكتبة bootstrap الخاصة بشركة تويتر.
  • Desktop Friendly
    مصاحبة ويمكن استخدامها مع سطح المكتب، مع برامج سطح المكتب، مثلا الفوتوشوب، او ما شابه.
  • Screen Reader Compatible
    متوافقة مع كروت الشاشة المختلفة.


تحميل مكتبة font awesome
http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.3.0.zip

كيف يتم استدعاء مكتبة font awesome في الموقع؟
بداية بعد فك الضغط عن الملف الخاص بالمكتبة، تجد مجلد فيه عدة مجلدات وكل مجلد عدة ملفات، قم بتصفية المجلدات والملفات وحذفها لتحصل على النتيجة التالية:
font awesome
الآن قم بنسخ المجلدات أو الملفات (المصفّاة) داخل موقعك، حسب ما تريد. بعد ذلك اذهب لعنصر الـ head الخاص بموقعك وضع الأكواد التالية بداخله، مع مراعاة مسار الملفات بالشكل الصحيح:

 <head>
<link rel="stylesheet" href="css/font-awesome.min.css"/>
<!--[if IE 7]>
<link rel="stylesheet" href="css/font-awesome-ie7.min.css"/>
<![endif]-->
</head>

كيف يمكن استخدام أيقونات font awesome في الموقع؟
ببساطة ولتجنب أي مشكلة، قم باتباع الطريقة التالية لاستخدام الأيقونات في الموقع،
لاستخدام الأيقونات بالموقع بكل سهولة من خلال استخدام الـ class يتم وضعه لأي وسم html.
اولا يجب أن يبقى موقع المكتبة لديك كـ مرجع للحصول على أسماء الأيقونات، او حفظه كصورة، أو حفظه كملف pdf، أو بالطريقة التي تناسبك،
توجه إلى الرابط الذي يحتوي على جميع الأيقونات من خلال الرابط التالي: هنا
ومن ثم قم بحفظ الموقع بالطريقة التي تراها مناسبة لك،
ستلاحظ بجوار كل أيقونة اسم، هذا الاسم هو عبارة عن اسم الـ class الخاص بالأيقونة لاستخدامه في الموقع، كما بالصورة التالية:

font awesome
الآن ضع وسم html ، أو أي وسم تريده، ودائما يُنصح بـ

<span></span>

ومن ثم ضع اسم الـ class للعنصر، كما بالشكل التالي:

<span class="icon-search"></span>
سوف ايقونة البحث بالشكل التالي

وللمقاسات المتعدده استخدم التالي :

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x


الآن يمكنكم متابعة بالتفصيل الممل والصوت والصورة من خلال الفيديو التالي:


محمد الحلبي : http://www.traidnt.net/vb/traidnt2314458/