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

1 سبتمبر، 2021
يُعتبر خط 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
تريد البدأ مع هذا الخط
1 سبتمبر، 2021