خط الأيقونات الأكثر من رائع Font Awesome

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

أولا عليك إضافة الكود التالي يضاف فوق </head>

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

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

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

مثال لنقل ان هذا رابط عبارة عن أيقونة

<a class="rabet" href="https://ihttarif.blogspot.com">
<i class="fa fa-home"></i>&lt;/a>

السطر الأول هو رابط

السطر الأزرق هو كلاس ليتم بناء عليه المظهر

الكلمة البرتقالية هي الأيقونه وطبعا الأخير كود الإغلاق

شاهد الناتج

طبعا يمكنك التنسيق إعتماداً على الكلاس الذي أضفناه للرابط كالتالي يضاف فوق <b:skin/><[[

.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 البعد من اليسار

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

ومن هنـــــا ستجد أيقونات الخط فقط إضغط على التي تعجبك وسيظهر لك كودها من هنا

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

مثال هذا رابط بكلمة ihttarif

<a class="rabet2" href="https://cnmu.blogspot.com/">ihttarif</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"
هذا الكود هو = الايقونة وكل أيقونه لها كود مختلف عند التعامل بهذه الطريقة.

أي أسئلة فكل ماعليك هو السؤال في التعليقات.