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

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





مميزات خط Awesome:

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

لاحظ بالقائمة المنسدلة السابقة لم استخدم اية رابط صورة لا في css ولا داخل الروابط
فقط وضعت الكود التالي فوق </head>
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

ثم دخلت من هنا وبدأت بأختيار الايقونات التي تناسب القائمة المنسدلة
<a class='fa-home' href='/'>
الرئيسية
</a>
<a class='fa fa-picture-o' href='#'>
صور
</a>
<a class='fa fa-comment-o' href='http://www.madad2.com/search/label/بلوجر' target='_blank'>
بلوجر
</a>
<a class='fa fa-laptop' href='#'>
برامج
</a>

فقط يجب تضمين رمز الايقونة بالرابط كما هو ظاهر امامكم في الروابط السابقة 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.
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> 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.
<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; الرئيسية</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; العاب</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; تطبيقات</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; برامج</a>
</div>
  • List icons
  • can be used
  • as bullets
  • in lists
Use fa-ul and fa-li to easily replace default bullets in unordered lists.
<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>
…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.
<i class="fa fa-quote-left fa-3x pull-left fa-border"></i>
...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.
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cogg fa-spin"></i>
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-*
<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> 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.
<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-camera
تريد البدأ مع هذا الخط


مشاركات أقدم المقال التالي
9 تعليق
  • Unknown
    Unknown 15‏/10‏/2014، 12:48:00 ص

    شكرا لخي العزيز ينتظرك شرح اخر لموقع مثل هدا وهو بوتيتراب
    بتوفيق الله

    • مداد الجليد
      مداد الجليد 15‏/10‏/2014، 9:47:00 م

      العفو أخي مسلم إن شاء الله القادم أجمل

  • Unknown
    Unknown 24‏/01‏/2015، 5:27:00 م

    أزال المؤلف هذا التعليق.

  • ysf
    ysf 20‏/04‏/2015، 10:23:00 م

    لطالما بحث عن هذا الشرح واليوم بالصدفة وجدته مطروح في قسم المساعدة لكن للاسف ;-( لم استطع اضافتة لان الاقسام مضافة عن طريق التخطيط، اليس هناك حل :-?

    • مداد الجليد
      مداد الجليد 21‏/04‏/2015، 10:37:00 م

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

  • Helmi
    Helmi 30‏/01‏/2016، 11:15:00 م

    كيفية تغير الالوان

    • مداد الجليد
      مداد الجليد 30‏/01‏/2016، 11:23:00 م

      يمكن تغيير لون هذه الايقونات كما بكل سهولة كما هي أدناه:
      الأصل
      <i class="fa fa-apple" ></i>
      بألوان
      <i class="fa fa-apple" style="color:green"></i>
      <i class="fa fa-apple" style="color:#038103"></i>
      أو
      <a href="# " style="color:green"><i class="fa fa-apple"></i> ابل تفاحة</a>
      <a href="# " style="color:#038103"><i class="fa fa-apple"></i> ابل تفاحة</a>

    • Helmi
      Helmi 31‏/01‏/2016، 7:49:00 م

      شكرا اخى

    • مداد الجليد
      مداد الجليد 31‏/01‏/2016، 11:02:00 م

      العفو محمد

أضف تعليق
عنوان التعليق