الأيقونات الأساسية
لاستخدام الخط الرموز ممتاز، إضافة السطر التالي داخل <head> قسم من صفحة HTML:
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
ملاحظة: لا يلزم تحميل أو التثبيت!
قمت بوضع الخط الرموز رهيبة باستخدام بادئة fa واسم الأيقونة.
مثال
التعليمة البرمجية التالية:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
</body>
</html>نتائج في:
تم تصميم الخط ممتاز لاستخدامه مع العناصر المضمنة. و <i> و <span> وتستخدم على نطاق واسع عناصر الرموز.
لاحظ أيضا أنه إذا قمت بتغيير حجم الخط أو لون حاوية رمز ويتغير الرمز. أشياء الشيء نفسه ينطبق على الظل، وشيء آخر أن يحصل الموروثة باستخدام CSS.
أيقونات أكبر
في fa-lg (33% increase) ، fa-2x ، fa-3x ، fa-4x ، أو fa-5x تستخدم الطبقات لزيادة رمز أحجام النسبي إلى الحاوية الخاصة بهم.
مثال
التعليمة البرمجية التالية:
<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>
نتائج في:
Tip: إذا تم الحصول على المفروم الرموز الخاصة بك خارج في أعلى وأسفل، وزيادة خط الطول.
قائمة الأيقونات
في 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-spinner fa-spin"></i>List icons</li>
<li><i class="fa-li
fa fa-square"></i>List icons</li>
</ul>نتائج في:
- List icons
- List icons
- List icons
أيقونات يحدها وسحبت
في fa-border ، fa-pull-right أو fa-pull-left تستخدم الطبقات عن يقتبس سحب أو الرموز المادة.
مثال
التعليمة البرمجية التالية:
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.نتائج في:
الأيقونات المتحركة
في fa-spin الطبقة يحصل أي رمز لتدوير، و fa-pulse الطبقة يحصل أي رمز لتدوير مع 8 خطوات.
مثال
التعليمة البرمجية التالية:
<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-cog fa-spin"></i>
<i
class="fa fa-spinner fa-pulse"></i>
نتائج في:
ملاحظة: IE8 و IE9 لا تدعم الرسوم المتحركة CSS3.
مستدير وانقلبت الرموز
و fa-rotate-* و fa-flip-* تستخدم الطبقات لتدوير والوجه الرموز.
مثال
التعليمة البرمجية التالية:
<i class="fa fa-shield"></i>
<i class="fa fa-shield
fa-rotate-90"></i>
<i class="fa fa-shield fa-rotate-180"></i>
<i class="fa fa-shield
fa-rotate-270"></i>
<i class="fa fa-shield fa-flip-horizontal"></i>
<i class="fa fa-shield fa-flip-vertical"></i>نتائج في:
أيقونات مكدسة
إلى كومة رموز متعددة، استخدم fa-stack من الدرجة على الأم، و fa-stack-1x فئة رمز الحجم بانتظام، و fa-stack-2x لرمز أكبر.
في fa-inverse الفئة يمكن أن تستخدم لون رمز بديل. يمكنك أيضا إضافة فئات رمز أكبر إلى الوالد لمواصلة السيطرة على التحجيم.
مثال
التعليمة البرمجية التالية:
<span class="fa-stack fa-lg">
<i class="fa fa-circle-thin
fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-circle-thin<br>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter
fa-stack-1x fa-inverse"></i>
</span>
fa-twitter (inverse) on fa-circle<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"
style="color:red;"></i>
</span>
fa-ban on fa-cameraنتائج في:
fa-twitter (inverse) on fa-circle
fa-ban on fa-camera
ثابت الأيقونات العرض
في fa-fw يستخدم فئة لوضع الرموز في عرض ثابت. هذه الطبقة هي مفيدة عند رمي مختلفة بعرض رمز من المحاذاة. مفيدة بشكل خاص في navlists التمهيد والجماعات القائمة.
مثال
<div class="list-group">
<a href="#" class="list-group-item"><i
class="fa fa-home fa-fw"></i> Home</a>
<a href="#"
class="list-group-item"><i class="fa fa-book fa-fw"></i> Library</a>
<a href="#" class="list-group-item"><i class="fa fa-pencil fa-fw"></i>
Applications</a>
<a href="#" class="list-group-item"><i class="fa
fa-cog fa-fw"></i> Settings</a>
</div> انها محاولة لنفسك » التمهيد
الخط ممتاز أيضا يعمل بشكل ممتاز مع جميع مكونات التمهيد.