دليل Font Awesome

إشارات Font Awesome

Font Awesome مجموعة ممتازة من الخطوط الأيقونية وواجهة برمجة تطبيقات CSS.

Font Awesome الخط يقدم لك أيقونات فيزيائية قابلة للتعديل، يمكن تخصيص حجمها وألوانها وظلالها وكافة الأنماط التي يمكن استخدامها عبر CSS.

للاستخدام إشارات Font Awesome، يرجى إضافة السطر التالي في جزء <head> من صفحة HTML الخاصة بك:

1、CDN الموصى به للداخل:

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

2、CDN الموصى به للخارج

<link　rel="stylesheet"　href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

ملاحظة: ليس من المستحسن تنزيلها للاستخدام، يمكنك فقط تضمين ملف CDN في رأس ملف html.
ملاحظة: يستخدم هذا الدليل إصدار 4.7.0.

يمكنك استخدام المقدمة fa واسم الإشارة لوضع إشارات Font Awesome.

نماذج تفاعلية

مثال

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.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>

اختبار لمعرفة ‹/›

تم تصميم Font Awesome لتستخدم مع العناصر المدمجة. <i> و <span> العناصر تستخدم على نطاق واسع للإشارات.

بالإضافة إلى ذلك، إذا تم تغيير حجم أو لون عنصر الإشارة، فإن الإشارة ستتغير.

إشارات كبيرة

استخدام fa-lg (زيادة 33%)، fa-2x، fa-3x، fa-4x، أو fa-5x كـ كلاسيكيات لزيادة حجم الإشارات بالنسبة لمحتوى العنصر.

مثال

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<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>
　
</body>
</html>

اختبار لمعرفة ‹/›

نصيحة: إذا كانت إشاراتك في الأعلى والأسفل مقطوعة، يرجى زيادة طول الخط.

إشارات القائمة

استخدام fa-ul و fa-li كـ بدائل للتمثيلات الافتراضية في القوائم غير المرتبة.

مثال

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<ul　class="fa-ul">
　　<li><i　class="fa-li　fa　fa-check-square"></i>إشارات القائمة</li>
　　<li><i　class="fa-li　fa　fa-spinner　fa-spin"></i>إشارات القائمة</li>
　　<li><i　class="fa-li　fa　fa-square"></i>إشارات القائمة</li>
</ul>
　
</body>
</html>

اختبار لمعرفة ‹/›

النتيجة بعد التشغيل كالتالي:

الحدود والرموز المحتملة

الصفة fa-border، fa-pull-right أو fa-pull-left تستخدم لسحب الإقتباسات أو الرموز في المقالات.

مثال

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<i　class="fa　fa-quote-left　fa-3x　fa-pull-left　fa-border"></i>
دليل الأساسيات -- تعلم الأساسيات، ويمكنك الذهاب أبعد！！！<br>
دليل الأساسيات -- تعلم الأساسيات، ويمكنك الذهاب أبعد！！！<br>
دليل الأساسيات -- تعلم الأساسيات، ويمكنك الذهاب أبعد！！！<br>
دليل الأساسيات -- تعلم الأساسيات، ويمكنك الذهاب أبعد！！！
　
</body>
</html>

اختبار لمعرفة ‹/›

النتيجة بعد التشغيل كالتالي:

الرموز الديناميكية

الصفة fa-spin تجعل الرمز يلتوي، والصفة fa-pulse تجعل الرمز يلتوي بنمط 8 خطوات.

مثال

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<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>
　
</body>
</html>

اختبار لمعرفة ‹/›

النتيجة بعد التشغيل كالتالي:

الاحتياط: IE8 و IE9 لا يدعمون حركة الرسوم البيانية CSS3.

الرموز المحولة و الثني

الصفات fa-rotate-* و fa-flip-* تستخدم لتحويل وثني الرموز.

مثال

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<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>
　
</body>
</html>

اختبار لمعرفة ‹/›

النتيجة بعد التشغيل كالتالي:

الرموز المدمجة

لإضافة عدة رموز مدمجة، استخدم صفة fa-stack في الوالدة، fa-stack-1x用于 حجم رمز عادي، fa-stack-2x用于 حجم رمز أكبر.

الصفة fa-inverse يمكن استخدامها لتغيير لون الرمز. يمكنك أيضًا إضافة صفة رمز أكبر إلى الوالدة لتحكم أكبر في الحجم.

مثال

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<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 على 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 (العكس) على 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 على fa-camera
　
</body>
</html>

اختبار لمعرفة ‹/›

النتيجة بعد التشغيل كالتالي:

إشارات عرض ثابت

يستخدم النوع fa-fw لضبط عرض الثابت للإشارات. عندما يكون عرض الإشارات المختلفة بعيدًا عن التزامن، فإن هذا النوع مفيد جدًا. يتم استخدامه بشكل خاص في قوائم التوجيه وكتل القائمة في Bootstrap.

مثال

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<p>بعرض ثابت:</p>
<div class="list-group">
　　<a href="#" class="list-group-item"><i class="fa fa-home fa-fw"></i> المنزل</a>
　　<a href="#" class="list-group-item"><i class="fa fa-book fa-fw"></i> مكتبة</a>
　　<a href="#" class="list-group-item"><i class="fa fa-pencil fa-fw"></i> التطبيقات</a>
　　<a href="#" class="list-group-item"><i class="fa fa-cog fa-fw"></i> إعدادات</a>
</div>
<p بدون عرض عرض ثابت:</p>
<div class="list-group">
　　<a href="#" class="list-group-item"><i class="fa fa-home"></i> المنزل</a>
　　<a href="#" class="list-group-item"><i class="fa fa-book"></i> المكتبة</a>
　　<a href="#" class="list-group-item"><i class="fa fa-pencil"></i> التطبيقات</a>
　　<a href="#" class="list-group-item"><i class="fa fa-cog"></i> إعدادات</a>
</div>
　
</body>
</html>

اختبار لمعرفة ‹/›

النتيجة بعد التشغيل كالتالي:

إشارات العلامة التجارية Font Awesome