تصميم موقعك بإستخدام خط Awesome المذهل لكل ماتحتاجه من ايقونات

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

مميزات خط Awesome:

يوفر لك الخط 479 ايقونة متنوعة
التحكم بحجم الايقونات وحركاتها
إستخدامه مع css
لا تستخدم جافا سكربت
ايقونات خفيفة الوزن

لاحظ بالقائمة المنسدلة السابقة لم استخدم اية رابط صورة لا في css ولا داخل الروابط
فقط وضعت الكود التالي فوق 

ثم دخلت من هنا وبدأت بأختيار الايقونات التي تناسب القائمة المنسدلة

الرئيسية

صور

بلوجر

برامج

فقط يجب تضمين رمز الايقونة بالرابط كما هو ظاهر امامكم في الروابط السابقة fa-home

امثلة:

باحجام مختلفة بسهولة

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

To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.

 class="fa fa-camera-retro fa-lg"> fa-lg
 class="fa fa-camera-retro fa-2x"> fa-2x
 class="fa fa-camera-retro fa-3x"> fa-3x
 class="fa fa-camera-retro fa-4x"> fa-4x
 class="fa fa-camera-retro fa-5x"> fa-5x

القوائم المنسدلة سهلة وجميلة

  الرئيسية   العاب   تطبيقات   برامج

Use fa-fw to set icons at a fixed width. Great to use when different icon widths throw off alignment. Especially useful in things like nav lists & list groups.

 class="list-group">
   class="list-group-item" href="#"> class="fa fa-home fa-fw">  الرئيسية
   class="list-group-item" href="#"> class="fa fa-book fa-fw">  العاب
   class="list-group-item" href="#"> class="fa fa-pencil fa-fw">  تطبيقات
   class="list-group-item" href="#"> class="fa fa-cog fa-fw">  برامج




تضمين ايقونات في كل مكان

• List icons
• can be used
• as bullets
• in lists

Use fa-ul and fa-li to easily replace default bullets in unordered lists.

 class="fa-ul">
  
 class="fa-li fa fa-check-square">List icons
  
 class="fa-li fa fa-check-square">can be used
  
 class="fa-li fa fa-spinner fa-spin">as bullets
  
 class="fa-li fa fa-square">in lists

ملاحظاتك أجمل

…tomorrow we will run faster, stretch out our arms farther… And then one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.

Use fa-border and pull-right or pull-left for easy pull quotes or article icons.

 class="fa fa-quote-left fa-3x pull-left fa-border">
...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning— So we beat on, boats against the
current, borne back ceaselessly into the past.

امثلة اخرى

الاكواد التالية هي امثلة لكيفية عملها مثل أعلاها تماماً fa-spinner, fa-refresh, fa-cog.

 class="fa fa-spinner fa-spin">
 class="fa fa-circle-o-notch fa-spin">
 class="fa fa-refresh fa-spin">
 class="fa fa-cogg fa-spin">

CSS3 animations aren't supported in IE8 - IE9.

تدوير الايقونات كيف تشاء

  normal
  fa-rotate-90
  fa-rotate-180
  fa-rotate-270
  fa-flip-horizontal
  fa-flip-vertical

بإستخدام هذه الرموز يمكنك تدويرها حسب الدرجات fa-rotate-* و fa-flip-*

 class="fa fa-shield"> normal

 class="fa fa-shield fa-rotate-90"> fa-rotate-90

 class="fa fa-shield fa-rotate-180"> fa-rotate-180

 class="fa fa-shield fa-rotate-270"> fa-rotate-270

 class="fa fa-shield fa-flip-horizontal"> fa-flip-horizontal

 class="fa fa-shield fa-flip-vertical"> icon-flip-vertical

كل ماتحتاج من ايقونات حتى الاجتماعية يمكنك تخصيصها

fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera

To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x for the regularly sized icon, and fa-stack-2x for the larger icon. fa-inverse can be used as an alternative icon color. You can even throw larger icon classes on the parent to get further control of sizing.

 class="fa-stack fa-lg">
   class="fa fa-square-o fa-stack-2x">
   class="fa fa-twitter fa-stack-1x">

fa-twitter on fa-square-o

 class="fa-stack fa-lg">
   class="fa fa-circle fa-stack-2x">
   class="fa fa-flag fa-stack-1x fa-inverse">

fa-flag on fa-circle

 class="fa-stack fa-lg">
   class="fa fa-square fa-stack-2x">
   class="fa fa-terminal fa-stack-1x fa-inverse">

fa-terminal on fa-square

 class="fa-stack fa-lg">
   class="fa fa-camera fa-stack-1x">
   class="fa fa-ban fa-stack-2x text-danger">

fa-ban on fa-camera

تريد البدأ مع هذا الخط