يعتبر الخط Awesome من الخطوط الممتازة لتصميم المواقع، والهدف الأساسي من خلاله هو التحكم في أيقونات الموقع والحصول عليها بطرق بسيطة جداً وبسرعة كبيرة، مما يلغي الحاجة إلى برامج الفوتوشوب والأيقونات المصورة. وفي هذا الموضوع اليوم سنتعرف على كيفية تشغيل هذا الخط على المواقع ومدونات بلوجر ونقدم أمثلة مذهلة عليه.
ميزات الخط الرائعة:
الخط يوفر لك 479 أيقونة متنوعة
التحكم في حجم وحركة الأيقونات
استخدامه مع CSS
لا تستخدم جافا سكريبت
أيقونات خفيفة
لاحظ أنني في القائمة المنسدلة السابقة لم أستخدم أي روابط صور لا في CSS ولا ضمن الروابط
فقط ضع الكود التالي أعلاه
<link href=" rel="stylesheet"/>
ثم دخلت من هنا وبدأت باختيار الأيقونات التي تناسب القائمة المنسدلة
رئيسي
اتحاد كرة القدم الصورة-o“href = “#”>
صورة
فا فا-تعليق-o“href = “target = “_blank”>
مدَّوِن
فا فا كمبيوتر محمول“href = “#”>
البرامج
يجب أن يتم تضمين رمز الأيقونة فقط في الرابط كما يظهر أمامك في الروابط السابقة fa-home
أمثلة:
fa-lg
fa-2x
فا-3x
fa-4x
فا-5x
لزيادة أحجام الأيقونات بالنسبة لحاويتها، استخدم الأمر fa-lg (زيادة 33%)، fa-2x,
fa-3x, fa-4xأو fa-5x الطبقات.
<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يستخدم fa-fw لتعيين الرموز بعرض ثابت. من الرائع استخدامه عندما يؤدي عرض الأيقونات المختلفة إلى عدم المحاذاة. مفيد بشكل خاص في أشياء مثل قوائم التنقل ومجموعات القوائم.
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i> الرئيسية</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i> العاب</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i> تطبيقات</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i> برامج</a>
</div>
- أيقونات القائمة
- ممكن استخدامه
- كالرصاص
- في القوائم
يستخدم fa-ul و fa-li لاستبدال الرموز النقطية الافتراضية بسهولة في القوائم غير المرتبة.
<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>
… غدًا سنجري بشكل أسرع، ونمد أذرعنا أبعد … وبعد ذلك في صباح أحد الأيام الجميلة – لذلك واصلنا السير بقوارب ضد التيار، ونعود بلا توقف إلى الماضي.
يستخدم fa-border و pull-right أو pull-left لسهولة سحب الاقتباسات أو أيقونات المقالات.
<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 غير مدعومة في IE8 – IE9.
طبيعي
فا-تدوير-90
فا-تدوير-180
فا-تدوير-270
فا-فليب-أفقي
فا فليب عمودي
باستخدام هذه الرموز يمكنك تدويرها حسب الدرجات 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 على fa-square-o
علم الاتحاد الانجليزي على دائرة الاتحاد الانجليزي
محطة فا على ساحة فا
حظر اتحاد كرة القدم على كاميرا الاتحاد الانجليزي
لتكديس أيقونات متعددة، استخدم fa-stack الطبقة على الوالدين، و fa-stack-1x
للأيقونة ذات الحجم العادي، و fa-stack-2x للأيقونة الأكبر. fa-inverse
يمكن استخدامه كلون رمز بديل. يمكنك أيضًا طرح فئات أيقونات أكبر على الأصل للحصول على مزيد من التحكم في الحجم.
<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تريد البدأ مع هذا الخط