معهد ترايدنت
مشرف ♥ ♥ ايطاليا سات مراقبه من خلاله
نبدأ اليوم بالدرس الأول من سلسلة دروس شرح مكتبة font awesome
راجع:
همسة: يوجد فيديو توضيحي نهاية الدرس.
راجع:
يجب عليك
تسجيل الدخول
او
تسجيل لمشاهدة الرابط المخفي
همسة: يوجد فيديو توضيحي نهاية الدرس.
ما هي مميزات المكتبة؟
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
يجب عليك
تسجيل الدخول
او
تسجيل لمشاهدة الرابط المخفي
كيف يتم استدعاء المكتبة في الموقع؟
بداية بعد فك الضغط عن الملف الخاص بالمكتبة، تجد مجلد فيه عدة مجلدات وكل مجلد عدة ملفات، قم بتصفية المجلدات والملفات وحذفها لتحصل على النتيجة التالية:
الآن قم بنسخ المجلدات أو الملفات (المصفّاة) داخل موقعك، حسب ما تريد.
بعد ذلك اذهب لعنصر الـ 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>
كما بالصورة التالية:
<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، أو بالطريقة التي تناسبك،
توجه إلى الرابط الذي يحتوي على جميع الأيقونات من خلال الرابط التالي:
يجب عليك
تسجيل الدخول
او
تسجيل لمشاهدة الرابط المخفي
ومن ثم قم بحفظ الموقع بالطريقة التي تراها مناسبة لك،
ستلاحظ بجوار كل أيقونة اسم، هذا الاسم هو عبارة عن اسم الـ class الخاص بالأيقونة لاستخدامه في الموقع، كما بالصورة التالية:
الآن ضع وسم html ، أو أي وسم تريده، ودائما يُنصح بـ
رمز Code:
<span></span>
ومن ثم ضع اسم الـ class للعنصر، كما بالشكل التالي:
<span></span>
ومن ثم ضع اسم الـ class للعنصر، كما بالشكل التالي:
رمز Code:
<span class="icon-search"></span>
إلى هنا نصل لنهاية الدرس الأول،
الآن يمكنكم متابعة بالتفصيل الممل والصوت والصورة من خلال الفيديو التالي:
أي طلب او استفتسار أنا بالخدمة إن شاء الله تعالى،
لا تنسوا الاشتراك بقناة اليوتيوب لتبقوا دائما معنا على اتصال وتواصل.
جميع الحقوق محفوظة لـ معهد ترايدنت
لكم خالص تحياتي وتقديري،
محبكم، محمد الحلبي
<span class="icon-search"></span>
إلى هنا نصل لنهاية الدرس الأول،
الآن يمكنكم متابعة بالتفصيل الممل والصوت والصورة من خلال الفيديو التالي:
يجب عليك
تسجيل الدخول
او
تسجيل لمشاهدة الرابط المخفي
أي طلب او استفتسار أنا بالخدمة إن شاء الله تعالى،
لا تنسوا الاشتراك بقناة اليوتيوب لتبقوا دائما معنا على اتصال وتواصل.
جميع الحقوق محفوظة لـ معهد ترايدنت
لكم خالص تحياتي وتقديري،
محبكم، محمد الحلبي
