شاشة الإنتظار

لغة القالب

الأدوات

الصفحات

تعرف على خط الأيقونات الرائع Font Awesome

Admin
السبت, يناير 16, 2016
CSS
الخط Font Awesome هو خط تم إصداره في 21 أغسطس عام 2012 لكي يحل محل الأيقونات المستخدمه في تصميم المواقع وتم إصداره بواسطة المطور Dave Gandy لكي يصبح هذا الخط في خلال ثلاث اعوام على قمة البرمجيات المستخدمه في تصميم المواقع حيث أنه اسهل في الإستخدام كثيراً من الصور وأيضاً أسرع منها في المعالجه بالنسبة لصفحات الويب وايضاً اكثر قابلية للتخصيص والتطوير يمكنك أن تعتبره أفضل إبتكار في الفترة الأخيرة فيما يخص تجميل مظهر المواقع يعني إسمه على مسمى رائع فعلاً

How To Use Font Awesome

كيف يمكن أن نستخدم الخط

شرح هذا الامر كأنك تطلب شرح لغة برمجية لكي تتمكن من جميع إمكانيات هذا الخط فيمكن استخدامه في العديد من الأشياء لكن يمكن أن نعتبر أن اكثر ما يهم المستخدم العادي هو إضافة أيقونه بجوار رابط او كلمة وهذا امر سنتعرف عليه بأسهل طريقة ممكنه

إضافة المكتبة

نضيف مكتبة الخط وسنستخدم الإصدار 4.7.0 هذا ليس أحدث اصدارات الخط والإصدارات الجديدة تحتوي أيقونات أكثر لكن ميزة هذا الإصدار انه خفيف وسهل الإستخدام ولهذا ما يزال الكثير يعتمدونه ولا يستخدمون الإصدارات الاحدث لانها أثقل وأصعب في الإستخدام تضيف الكود التالي بعد الوسم <head>
<link  href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
بعد إضافة المكتبة نحتاج لنعرف كيف يتم تفعيل الأيقونات , يعتمد الأمر في التفعيل على طريقتين الأولى عبر أكواد HTML والثانية عبر أكواد CSS

HTML

لإضافة الكود عبر HTML كل ما سنحتاجه هو كود الـ HTML الخاص بالأيقونة
ستجد الأكواد في هذه الصفحة من هنــــا يمكنك نسخ كود HTML الخاص بالأيقونة التي تعجبك
لنفترض أننا نريد اضافة الأيقونة مثلا داخل رابط
<a href="https://www.cnmu.info"><i class="fa fa-home"></i></a>
كما ترى كود HTML الخاص بالأيقونة أضفته داخل الرابط وهذا هو الناتج

CSS

عندما نضيف الأيقونة بلغة CSS نستخدم الوسم before , after
لنفترض ان لدي الرابط بهذا الشكل 
<a class="AIcon" href="https://www.cnmu.info"></a>
ونريد ان نضيف له نفس الأيقونة لكن بطريقة CSS
سنستخدم الكود التالي
.AIcon::before {
content:"\f015";
font-family:fontawesome;
font-size:20px;
}

استخدمنا في الكود معرف الرابط AIcon
ثم وضعنا رمز الأيقونة المعلم بالأحمر ويمكنك أن تجلب رموز CSS من نفس الصفحة التي وضعناها سابقاً من هنـــا
ثم قمنا بالتعريف أن ما نسختدمه هو الخط وكذلك وضعنا حجم للأيقونة 20px

ما الفرق بين الطريقتين؟

الامر يعود لك وبحسب الاكواد التي تستعملها طبعا طريقة HTML أسهل في الإستخدام لكن أحيانا يكون هناك أكواد لا نستطيع ان نضيف لها أكواد الأيقونات فحينها استخدام CSS يكون المناسب لذلك الأمر سيرجع لما هو أسهل لك

تعليقك يساهم في تطوير المحتوى ويزيد من الفائدة بمشاركتنا بأفكارك واقتراحاتك , رأيك يهمنا فساهم بتعليقاتك معنا
يرجى عدم وضع روابط خارجية في التعليقات لضمان نشرها

  1. شكراا اخي لقد استفدت كتيرا كنت دائما ماأجد صعوبة في اضافة بعض الايقونات

    ردحذف
  2. تصدق ب اي
    اني كل ما اعرب قالب جنب font-family الاقي FontAwesome ولما اشيلها القالب الايقونات الي في اتشالت وبقت مربعات وهبقا اتجنن دة حصل من اي
    لحد ما انتا نزلت الموضوع جميل دة

    ردحذف
  3. سررت كثيراً بمروركم أخواى الكريمان
    وموفقين بإذن الله

    ردحذف
  4. موضوع قد شرح سابقا في اكثر من مدونة ولكن هنا تم شرحة بطريقة اخرى اكثر احترافية ,كبييير يا دون كن مدون

    ردحذف
  5. موضوع في القمة أخي عمرو
    أخي أتمني ان تعطيني رايك
    medbzm.blogspot.com

    ردحذف
    الردود
    1. حياك الله اخي محمد
      شكراً لمرورك يا طيب

      حذف
  6. انت الاروع اخى شكرا لك

    ردحذف
  7. موضوع جميل لجمال روحك الطاهرة يا كريم القلب والروح ♥

    ردحذف
    الردود
    1. الله يعزك أخي الكريم , هذا من ذوقك يا طيب شكراً لك ♥♥♥

      حذف

عدد المواضيع