الخط 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
وتجربة موفقةOriginal Article