نبدأ اليوم بالدرس الأول من سلسلة دروس شرح مكتبة
font awesome
راجع: تقديرا لمجهود صاحب البوست او المشاركه فانه لا يمكن مشاهدة الروابط إلا بعد التعليق على البوست In appreciation of the efforts of the owner of the post or participation, the links cannot be viewed until after responding to the post or participation
همسة: يوجد فيديو توضيحي نهاية الدرس.
ما هي مميزات المكتبة؟
One Font, 361 Icons
أي تعني بأن المكتبة تتكون من ملف واحد من نوع خط، يحتوي على 361 أيقونة.
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
متوافقة مع كروت الشاشة المختلفة.
كيف يمكنني تحميل المكتبة؟
يمكنك تحميل المكتبة من خلال
المرفقات،
أو من خلال الموقع الرسمي الخاص بها على github
تقديرا لمجهود صاحب البوست او المشاركه فانه لا يمكن مشاهدة الروابط إلا بعد التعليق على البوست In appreciation of the efforts of the owner of the post or participation, the links cannot be viewed until after responding to the post or participation
كيف يتم استدعاء المكتبة في الموقع؟
بداية بعد فك الضغط عن الملف الخاص بالمكتبة، تجد مجلد فيه عدة مجلدات وكل مجلد عدة ملفات، قم بتصفية المجلدات والملفات وحذفها لتحصل على النتيجة التالية:
الآن قم بنسخ المجلدات أو الملفات
(المصفّاة) داخل موقعك، حسب ما تريد.
بعد ذلك اذهب لعنصر الـ head الخاص بموقعك وضع الأكواد التالية بداخله، مع
مراعاة مسار الملفات بالشكل الصحيح:
رمز Code:
<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>
كما بالصورة التالية:
كيف يمكن استخدام الأيقونات في الموقع؟
ببساطة ولتجنب أي مشكلة، قم باتباع الطريقة التالية لاستخدام الأيقونات في الموقع،
لاستخدام الأيقونات بالموقع بكل سهولة من خلال استخدام الـ class يتم وضعه لأي وسم html.
اولا يجب أن يبقى موقع المكتبة لديك كـ
مرجع للحصول على أسماء الأيقونات، او حفظه كصورة، أو حفظه كملف pdf، أو بالطريقة التي تناسبك،
توجه إلى الرابط الذي يحتوي على جميع الأيقونات من خلال الرابط التالي:
تقديرا لمجهود صاحب البوست او المشاركه فانه لا يمكن مشاهدة الروابط إلا بعد التعليق على البوست In appreciation of the efforts of the owner of the post or participation, the links cannot be viewed until after responding to the post or participation
ومن ثم قم بحفظ الموقع بالطريقة التي تراها مناسبة لك،
ستلاحظ بجوار كل أيقونة اسم، هذا الاسم هو عبارة عن اسم الـ class الخاص بالأيقونة لاستخدامه في الموقع، كما بالصورة التالية:
الآن ضع وسم html ، أو أي وسم تريده، ودائما يُنصح بـ
رمز Code:
<span></span>
ومن ثم ضع اسم الـ class للعنصر، كما بالشكل التالي:
رمز Code:
<span class="
icon-search"></span>
إلى هنا نصل لنهاية الدرس الأول،
الآن يمكنكم متابعة بالتفصيل الممل والصوت والصورة من خلال الفيديو التالي:
تقديرا لمجهود صاحب البوست او المشاركه فانه لا يمكن مشاهدة الروابط إلا بعد التعليق على البوست In appreciation of the efforts of the owner of the post or participation, the links cannot be viewed until after responding to the post or participation
أي طلب او استفتسار أنا بالخدمة إن شاء الله تعالى،
لا تنسوا الاشتراك بقناة اليوتيوب لتبقوا دائما معنا على اتصال وتواصل.
جميع الحقوق محفوظة لـ معهد ترايدنت
لكم خالص تحياتي وتقديري،
محبكم، محمد الحلبي
[الدرس الأول] مميزات مكتبة font awesome + التحميل + شرح بالصور والفيديو بالتفصيل
العرض الشجري
