شرح عمل خطوط الأيقونات Font Awesome

دائما ما ترى المصممين يبحثون عن أشياء جديدة لإظهار تصاميمهم بحلة جديدة ويقتصر ذلك على مصممي ومطوري المواقع، يبحثون عن خيارات وادوات من أجل تسريع تصفح الموقع وفي الأونة الأخيرة ظهرت بكثرة مواقع تقدم تسهيلات لتصميم موقع ومنها الأيقونات وهذا ما سأطرحه، ليست أي أيقونات عادية بل ستغنيك عن استخدام الصور بصفة عامة كما تشاهدون بالمدونة بها ايقونات ليست صور بل على شكل كود مثلا الأيقونات التي بالقائمة الأفقية وهو Font Awesome الخط الممتاز أقوى خطوط الأيقونات المستعملة في من طرف المصممين ولديه أكبر نسبة من مستعملين، حيث تم في البداية تخصيصه للعمل فقط على تويتر بوت ستراب Twitter Bootstarp أما الأن فالكل يستخدمه وتم تطويره وكل تحديث يتضمن أيقونات جديدة للعلم أنك يمكن التحكم بكل أيقونة من ناحية المقاس واللون والإتجاه كل شيئ لذا لنتابع طريقة عمله

شرح طريقة التركيب
1. توجه لقالب >> تحرير
2. ابحث بإستعمال Ctrl+F عن </head>
3. ضع الكود التالي فوقه 

* الكود التالي عبارة عن ملف جيكويري يحتوي على جميع الأيقونات نسخة : 4.0.3

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

4. بعد إضافة الكود تتبقى لنا خطوة التطبيق

* كل كود لديه إسم خاص به للأيقونة مثلا :

fa-html5

<i class="fa fa-html5"></i>

5. كما تلاحظون في الكود فهو يحتوي على fa اخرى لتعريف الكود وهي ضرورية 
6. المرحلة التالية سنرى طريقة تكبير الأيقونات للعلم توجد طريقة أخرى

لتكبير أو تصغير حجم الأيقونة سنضيف القيمة fa-x1
fa-lg, fa-1x, fa-2x, fa-3x,fa-4x, fa-5x
 fa-html5
 fa-html5
 fa-html5
 fa-html5
 fa-html5

<i class="fa fa-html5 fa-lg"> مثال </i> 
<i class="fa fa-html5 fa-2x"> مثال</i>
<i class="fa fa-html5 fa-3x"> مثال</i>
<i class="fa fa-html5 fa-4x"> مثال</i>
<i class="fa fa-html5 fa-5x"> مثال</i> 

* يجب ترك مساحة بين الكلمة والوسم لكي لا تتداخل مع الأيقونة

7. في هذه المرحلة سنضيف خاصية تحريك الأيقونة واتي تجعل مثلا دائرة تدور وهي تستخدم فقط لرموز الدائرة مثال :

<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>

* أضفنا وسم الرمز مع الأيقونة زائد رمز لدوران وهو fa-spin

8. المرحلة التالية هي خاصة بالإتجاهات أمثلة : 

 عادي
 إتجاه-90 درجة
 أفقي 180 درجة
 عمودي على اليمين 270 درجة
 أفقي عادي
 عمودي عادي 

* أضفنا وسم الرمز مع الأيقونة زائد رمز الإتجاه وهو : fa-rotate

<i class="fa fa-shield"></i>
<i class="fa fa-shield fa-rotate-90">
<i class="fa fa-shield fa-rotate-180">
<i class="fa fa-shield fa-rotate-270">
<i class="fa fa-shield fa-flip-horizontal">
<i class="fa fa-shield fa-flip-vertical">

9. دائما إذا اردت تطبيق الإتجاه أو الدوران أو التكبير كما في المراحل السابقة كل ما عليك إضافته هو الرمز بعد fa fa-Exempl

الكود التالي يخص الستايل Css ويمكن التحكم بالأيقونة من الحجم والإتجاه والمسافة بدون أن تضيف
<i class="fa fa-html5"></i> هذا الشرح لمن يعرف التعامل مع الأكواد

/* ar1web */ 
.element:before {
    content: "\f000"; 
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
/*--custom  CSS--*/
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    left: 0;
}

التغييرات الهامة :

* الكلمة element ينبغي تغييرها بمعرف الإضافة

* المحدد بالأصفر يخص كود الأيقونة

* المحدد بالأحمر خاص باللون 

* المحدد بالأزرق يخص الحجم

* المحدد بالبرتقالي يخص المسافة بين الكلمة والأيقونة

* المحدد بالوردي يخصل الإتجاه left - right

للحصول على الأيقونات أدخل لموقع Font-Awesome ولتحصل على كود الأيقونة الذي يُستعمل في أكواد Css ستجده مكتوب بداخل صفحة الأيقونة المختارة مثلا ستلاحظ f219 في هذه الصفحة Diamond

المصدر: عرب ويب