مساحة إعلانية

السبت، 16 يناير، 2016

السبت، 16 يناير، 2016

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


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

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

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

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>

ثانيا تطبيق الخط وينقسم على مرحلتين

المرحلة الأولى التطبيق كأيقونه فقط

مثال لنقل ان هذا رابط عبارة عن أيقونة
<a class="rabet" href="https://cnmu.blogspot.com">
<i class="fa fa-home"></i>
</a>
 السطر الأول هو رابط
الكلمة الحمراء هي كلاس ليتم بناء عليه المظهر

السطر الأزرق هو الأيقونه وطبعا الأخير كود الإغلاق
شاهد الناتج

طبعا يمكنك التنسيق إعتماداً على الكلاس الذي أضفناه للرابط كالتالي
.rabet {
  display: inline-block;
  float: right;
  font-size: 100px;
  margin: 0 5px 0 5px;
  color:#444444;
}

الرقم 100 هو حجم الأيقونه
كلمة right اتجاه الرمز لليمين يمكنك جعله لليسار بإستبدالها بـ left
هذا #444444 هو لون الأيقونه
 margin هي مسافات البعد حول الأيقونه
0 البعد من الاعلى
5 البعد من اليمين
0 البعد من الأسفل
5 البعد من اليسار
طبعا جودة تنسيق القالب تفرق كثيراً في التطبيق لكن طبعا قد يكون هناك بعض التنسيقات ليست متوافقه وتحتاج بعض العمل منك ويرجع هذا لخبرتك في الأكواد
ومن هنـــــا ستجد أيقونات الخط فقط إضغط على التي تعجبك وسيظهر لك كودها

ملاحظة هامة جداً

يمكنك ان تضيف هذا الكلاس fa-spin لجعل اى أيقونة تدور بإستمرار
مثال
<i class="fa fa-spinner fa-spin"></i>
شاهد الكلاس تم إضافته بعد كلاس الأيقونة وهذه النتيجة

المرحلة الثانية تركيب الأيقونات بجانب نصوص

وهي ان يكون هناك كلام بجانب الرابط او ما نريد ان نضيف أيقونه بجواره فإن أضفناها بدون تنسيق مضبوط سيتغير خط الرابط ويصبح بنفس نوع خط الايقونة فما الحل ؟
مثال هذا رابط بكلمة كن مدون
<a class="rabet2" href="https://cnmu.blogspot.com/">كن مدون</a>
ماذا نفعل لنضيف قبل أو بعده أيقونه ؟
سنستخدم الوسوم before و after
هم يعنيان قبل وبعد لكن هذا لن يهم كثيراً في التنسيق يمكنك اعتباره أن بإستخدام أحدها تضيف أيقونه والآخر يمكنك ان تضيف أيقونه ثانية لنفس الرابط أو الكود الذي تضيف له الأيقونات

.rabet2::before {
  color: #cc0000;
  content: "\f004";
  float: right;
  font-family: fontawesome;
  font-size: 18px;
  margin: 0 5px 0 5px;
}

شاهد النتيجة
كن مدون
18 حجم الخط
  right نفس ما سبق
margin نفس ما سبق
 هذا #cc0000 هو لون الأيقونة
وطبعا before يمكنك تكرار الكود مع after  لإضافة أيقونة أخرى لنفس الرابط
أهم جزء هو هذا الكود "\f004"
هذا الكود هو = الايقونة وكل أيقونه لها كود مختلف عند التعامل بهذه الطريقة
يمكنك الحصول على أكواد الأيقونات من الصفحة التالية
أكواد CSS للخط الرائع Font Awesome

وتجربة موفقة

هناك 8 تعليقات:

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

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

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

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

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

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

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

    ردحذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

جميع الحقوق محفوظة لــ كن مدون 2013-2015 ©