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

دائما ما ترى المصممين يبحثون عن أشياء جديدة لإظهار تصاميمهم بحلة جديدة ويقتصر ذلك على مصممي ومطوري المواقع او 

المدونات ، يبحثون عن خيارات وادوات من أجل تسريع تصفح الموقع وفي الأونة الأخيرة ظهرت بكثرة مواقع تقدم تسهيلات 

لتصميم المواقع ومنها الأيقونات وهذا ما سأطرحه ليست أي أيقونات عادية بل ستغنيك عن استخدام الصور بصفة عامة 

سأقدم لكم أولا بعض المواقع لتي قدم هذه 

الخدمة بعدها سأتطرق لشرح الموقع الأول والمستعمل بكثرة

الموقع الاول

الموقع يتيح لك إمكانية عمل خط أيقونات خاص بك, بالاعتماد على مصادر من بعض الخطوط مثل: Font Awesome, 

Entypo, Iconic والكثير من الخطوط  ..

الموقع التاني

من الخطوط المميزة للرسومات التخطيطية وللصفحات الموجهة نحو الطباعة.

الموقع التالث

خط أيقونات قوي  أيضا يحتوي على إضافة خاصة بالفوتوشوب 

الموقع التالث

الخط المميز من الموقع الرهيب zurb ,يتيح لك أيضا دروس خاصة 

الموقع الرابع

هذا هو الموقع الذي سنستعمله في الشرح و هو الذي استعمله انا

الخط الممتاز, وهو أقوى خطوط الأيقونات المستعملة في من طرف المصممين ولديه أكبر نسبة من مستعملين, 

حيث تم في البداية تخصيصه للعمل فقط على تويتر بوت ستراب Twitter Bootstarp أما الأن فالكل يستخدمه وتم تطويره 

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

عمله ..

اولا توجه الى قالب >> تحرير HTML
تانيا ابحث بإستعمال Ctrl+F عن </head>
تالثا ضع الكود التالي فوقه

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

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

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

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

fa-html5

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

 كما تلاحظون في الكود فهو يتحوي على fa اخرى لتعريف الكود وهي ضرورية 

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

لتكبير أو تصغير حجم الأيقونة سنضيف القيمة fa-x1

fa-lg,fa-1x,fa-2x,fa-3x,fa-4x,fa-5x

<p><i class="fa fa-html5 fa-lg"></i> fa-html5</p><p><i class="fa fa-html5 fa-2x"></i> fa-html5</p><p><i class="fa fa-html5 fa-3x"></i> fa-html5</p><p><i class="fa fa-html5 fa-4x"></i> fa-html5</p><p><i class="fa fa-html5 fa-5x"></i> fa-html5</p>

 أضفناها بعد : fa fa-html5

إذا تسائلتم عن الوسم <p>  فهو فقط لإدراج كلمة .. لا يهمنا ما سنستعمله فقط هو <i class="fa fa-html5"></i>

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

 أضفنا وسم الرمز مع الأيقونة + رمز الإتجاه وهو :  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">

 ملاحظة كل المراحل السابقة هي لتفهم عمل الأيقونات ولتوضيح وفي الحقيقة قليل ما سنستخدم تلك المراحل