مرجع أيقونات Font Awesome (CSS Pseudo-elements)
آخر تحديث للصفحة: جارٍ التحميل...
1. مقدمة
هذه الصفحة توفر مرجعًا شاملاً لاستخدام أيقونات Font Awesome (الإصدار 6 المجاني) عن طريق خاصية content في CSS مع العناصر الزائفة ::before أو ::after.
المتطلب الأساسي والوحيد: يجب تضمين ملف CSS الخاص بـ Font Awesome من خلال رابط CDN في قسم <head></head> الخاص بصفحتك (كما هو مُضمَّن في هذه الصفحة). هذا الرابط يقوم بتحميل تعريفات الخطوط اللازمة.
<!-- الرابط الضروري في قسم head -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" ... />
لا حاجة لتضمين أي ملفات JavaScript من Font Awesome (all.min.js) لهذه الطريقة تحديدًا.
2. طريقة استخدام CSS
الفكرة هي تطبيق الأيقونة على عنصر HTML باستخدام كلاس CSS مخصص.
الكود الأساسي في CSS:
/* مثال لكلاس CSS لتطبيق أيقونة */
.my-icon-class::before { /* أو ::after */
/* 1. اختر عائلة الخط المناسبة */
font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands";
/* 2. حدد وزن الخط حسب نمط الأيقونة (Solid, Regular, Brands) */
font-weight: 900; /* مثال: استخدام أيقونة Solid */
/* 3. ضع قيمة Unicode للأيقونة المطلوبة من الجدول أدناه */
content: "\f007"; /* مثال: أيقونة المستخدم */
/* 4. خصائص أساسية لتنسيق الخط */
display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
/* 5. تنسيقات إضافية (اختياري) */
margin-left: 7px; color: blue; font-size: 1.2em;
}
ملاحظة هامة: لا يمكن استخدام
::before أو ::after مباشرة مع عناصر HTML مثل <input />, <img />. استخدمها مع عناصر تقبل المحتوى مثل <span></span>, <button></button>, <a></a> إلخ.
3. جدول قيم Unicode للأيقونات (عينة كبيرة)
تنويه: هذا الجدول يحتوي على عينة كبيرة جدًا من أيقونات Font Awesome 6 المجانية. للقائمة الكاملة والمحدثة، زر صفحة البحث الرسمية.
| الأيقونة | النمط (Weight) | قيمة Unicode |
|---|---|---|
| | Solid (900) | "\e550" |
| | Solid (900) | "\e551" |
| | Solid (900) | "\e552" |
| | Solid (900) | "\e553" |
| | Solid (900) | "\e554" |
| | Solid (900) | "\f2b9" |
| | Solid (900) | "\f2bb" |
| | Solid (900) | "\f042" |
| | Solid (900) | "\f037" |
| | Solid (900) | "\f039" |
| | Solid (900) | "\f036" |
| | Solid (900) | "\f038" |
| | Solid (900) | "\f0f9" |
| | Solid (900) | "\f13d" |
| | Solid (900) | "\f103" |
| | Solid (900) | "\f100" |
| | Solid (900) | "\f101" |
| | Solid (900) | "\f102" |
| | Solid (900) | "\f107" |
| | Solid (900) | "\f104" |
| | Solid (900) | "\f105" |
| | Solid (900) | "\f106" |
| | Solid (900) | "\f187" |
| | Solid (900) | "\f358" |
| | Solid (900) | "\f359" |
| | Solid (900) | "\f35a" |
| | Solid (900) | "\f35b" |
| | Solid (900) | "\f063" |
| | Solid (900) | "\f060" |
| | Solid (900) | "\f061" |
| | Solid (900) | "\f062" |
| | Solid (900) | "\f047" |
| | Solid (900) | "\f0b2" |
| | Solid (900) | "\f067" |
| | Solid (900) | "\f068" |
| | Solid (900) | "\f00d" |
| | Solid (900) | "\f00c" |
| | Solid (900) | "\f058" |
| | Solid (900) | "\f14a" |
| | Solid (900) | "\f017" |
| | Solid (900) | "\f0c2" |
| | Solid (900) | "\f0ed" |
| | Solid (900) | "\f0ee" |
| | Solid (900) | "\f121" |
| | Solid (900) | "\f126" |
| | Solid (900) | "\f013" |
| | Solid (900) | "\f085" |
| | Solid (900) | "\f075" |
| | Solid (900) | "\f27a" |
| | Solid (900) | "\f086" |
| | Solid (900) | "\f14e" |
| | Solid (900) | "\f0c5" |
| | Solid (900) | "\f1f9" |
| | Solid (900) | "\f094" |
| | Solid (900) | "\f125" |
| | Solid (900) | "\f0c9" |
| | Solid (900) | "\f1c0" |
| | Solid (900) | "\f1b2" |
| | Solid (900) | "\f108" |
| | Solid (900) | "\f019" |
| | Solid (900) | "\f044" |
| | Solid (900) | "\f141" |
| | Solid (900) | "\f142" |
| | Solid (900) | "\f0e0" |
| | Solid (900) | "\f2b6" |
| | Solid (900) | "\f12d" |
| | Solid (900) | "\f069" |
| | Solid (900) | "\f071" |
| | Solid (900) | "\f059" |
| | Solid (900) | "\f05a" |
| | Solid (900) | "\f06a" |
| | Solid (900) | "\f06e" |
| | Solid (900) | "\f070" |
| | Solid (900) | "\f0fb" |
| | Solid (900) | "\f15b" |
| | Solid (900) | "\f15c" |
| | Solid (900) | "\f1c6" |
| | Solid (900) | "\f1c7" |
| | Solid (900) | "\f1c9" |
| | Solid (900) | "\f1c3" |
| | Solid (900) | "\f1c5" |
| | Solid (900) | "\f1c1" |
| | Solid (900) | "\f1c4" |
| | Solid (900) | "\f1c8" |
| | Solid (900) | "\f1c2" |
| | Solid (900) | "\f008" |
| | Solid (900) | "\f0b0" |
| | Solid (900) | "\f024" |
| | Solid (900) | "\f11e" |
| | Solid (900) | "\f07b" |
| | Solid (900) | "\f07c" |
| | Solid (900) | "\f031" |
| | Solid (900) | "\f04e" |
| | Solid (900) | "\f119" |
| | Solid (900) | "\f1e3" |
| | Solid (900) | "\f11b" |
| | Solid (900) | "\f0e3" |
| | Solid (900) | "\f150" |
| | Solid (900) | "\f151" |
| | Solid (900) | "\f152" |
| | Solid (900) | "\f153" |
| | Solid (900) | "\f154" |
| | Solid (900) | "\f159" |
| | Solid (900) | "\f192" |
| | Solid (900) | "\f06b" |
| | Solid (900) | "\f000" |
| | Solid (900) | "\f0ac" |
| | Solid (900) | "\f19d" |
| | Solid (900) | "\f0c0" |
| | Solid (900) | "\f0a0" |
| | Solid (900) | "\f025" |
| | Solid (900) | "\f004" |
| | Solid (900) | "\f21e" |
| | Solid (900) | "\f1da" |
| | Solid (900) | "\f015" |
| | Solid (900) | "\f0f8" |
| | Solid (900) | "\f254" |
| | Regular (400) | "\f2b9" |
| | Regular (400) | "\f2bb" |
| | Regular (400) | "\f119" |
| | Regular (400) | "\f11a" |
| | Regular (400) | "\f118" |
| | Regular (400) | "\f0f3" |
| | Regular (400) | "\f0a9" |
| | Regular (400) | "\f02e" |
| | Regular (400) | "\f1ad" |
| | Regular (400) | "\f073" |
| | Regular (400) | "\f133" |
| | Regular (400) | "\f274" |
| | Regular (400) | "\f272" |
| | Regular (400) | "\f271" |
| | Regular (400) | "\f273" |
| | Regular (400) | "\f150" |
| | Regular (400) | "\f191" |
| | Regular (400) | "\f152" |
| | Regular (400) | "\f151" |
| | Regular (400) | "\f080" |
| | Regular (400) | "\f058" |
| | Regular (400) | "\f14a" |
| | Regular (400) | "\f111" |
| | Regular (400) | "\f11c" |
| | Regular (400) | "\f017" |
| | Regular (400) | "\f0c2" |
| | Regular (400) | "\f00d" |
| | Regular (400) | "\f075" |
| | Regular (400) | "\f27a" |
| | Regular (400) | "\f086" |
| | Regular (400) | "\f14e" |
| | Regular (400) | "\f0c5" |
| | Regular (400) | "\f1f9" |
| | Regular (400) | "\f094" |
| | Regular (400) | "\f044" |
| | Regular (400) | "\f0e0" |
| | Regular (400) | "\f2b6" |
| | Regular (400) | "\f06e" |
| | Regular (400) | "\f070" |
| | Regular (400) | "\f15b" |
| | Regular (400) | "\f15c" |
| | Regular (400) | "\f1c6" |
| | Regular (400) | "\f1c7" |
| | Regular (400) | "\f1c9" |
| | Regular (400) | "\f1c3" |
| | Regular (400) | "\f1c5" |
| | Regular (400) | "\f1c1" |
| | Regular (400) | "\f1c4" |
| | Regular (400) | "\f1c8" |
| | Regular (400) | "\f1c2" |
| | Regular (400) | "\f024" |
| | Regular (400) | "\f07b" |
| | Regular (400) | "\f07c" |
| | Regular (400) | "\f1e3" |
| | Regular (400) | "\f2d9" |
| | Regular (400) | "\f256" |
| | Regular (400) | "\f25b" |
| | Regular (400) | "\f0a7" |
| | Regular (400) | "\f0a5" |
| | Regular (400) | "\f0a4" |
| | Regular (400) | "\f0a6" |
| | Regular (400) | "\f25a" |
| | Regular (400) | "\f255" |
| | Regular (400) | "\f257" |
| | Regular (400) | "\f259" |
| | Regular (400) | "\f2f5" |
| | Regular (400) | "\f0a0" |
| | Regular (400) | "\f004" |
| | Regular (400) | "\f0f8" |
| | Regular (400) | "\f254" |
| | Brands (400) | "\f170" |
| | Brands (400) | "\f270" |
| | Brands (400) | "\f17b" |
| | Brands (400) | "\f209" |
| | Brands (400) | "\f179" |
| | Brands (400) | "\f1b4" |
| | Brands (400) | "\f1b5" |
| | Brands (400) | "\f171" |
| | Brands (400) | "\f15a" |
| | Brands (400) | "\f26e" |
| | Brands (400) | "\f1cb" |
| | Brands (400) | "\f271" |
| | Brands (400) | "\f26d" |
| | Brands (400) | "\f13c" |
| | Brands (400) | "\f272" |
| | Brands (400) | "\f1a5" |
| | Brands (400) | "\f1bd" |
| | Brands (400) | "\f1a6" |
| | Brands (400) | "\f17d" |
| | Brands (400) | "\f1e4" |
| | Brands (400) | "\f1aa" |
| | Brands (400) | "\f1d1" |
| | Brands (400) | "\f2d5" |
| | Brands (400) | "\f09a" |
| | Brands (400) | "\f082" |
| | Brands (400) | "\f26c" |
| | Brands (400) | "\f28e" |
| | Brands (400) | "\f273" |
| | Brands (400) | "\f180" |
| | Brands (400) | "\f265" |
| | Brands (400) | "\f1d3" |
| | Brands (400) | "\f1d2" |
| | Brands (400) | "\f09b" |
| | Brands (400) | "\f113" |
| | Brands (400) | "\f092" |
| | Brands (400) | "\f184" |
| | Brands (400) | "\f296" |
| | Brands (400) | "\f297" |
| | Brands (400) | "\f0d5" |
| | Brands (400) | "\f0d4" |
| | Brands (400) | "\f2b3" |
| | Brands (400) | "\f206" |
| | Brands (400) | "\f1d4" |
| | Brands (400) | "\f13b" |
| | Brands (400) | "\f16d" |
| الأيقونة | النمط (Weight) | قيمة Unicode |
|---|---|---|
| | Solid (900) | "\f251" |
| | Solid (900) | "\f252" |
| | Solid (900) | "\f253" |
| | Solid (900) | "\f2c1" |
| | Solid (900) | "\f03e" |
| | Solid (900) | "\f03c" |
| | Solid (900) | "\f01c" |
| | Solid (900) | "\f033" |
| | Solid (900) | "\f129" |
| | Solid (900) | "\f03a" |
| | Solid (900) | "\f022" |
| | Solid (900) | "\f0cb" |
| | Solid (900) | "\f0ca" |
| | Solid (900) | "\f124" |
| | Solid (900) | "\f023" |
| | Solid (900) | "\f3c1" |
| | Solid (900) | "\f0d0" |
| | Solid (900) | "\f076" |
| | Solid (900) | "\f11a" |
| | Solid (900) | "\f130" |
| | Solid (900) | "\f131" |
| | Solid (900) | "\f2d0" |
| | Solid (900) | "\f10b" |
| | Solid (900) | "\f3cd" |
| | Solid (900) | "\f0d6" |
| | Solid (900) | "\f182" |
| | Solid (900) | "\f001" |
| | Solid (900) | "\f1ea" |
| | Solid (900) | "\f1f8" |
| | Solid (900) | "\f1d8" |
| | Solid (900) | "\f0c6" |
| | Solid (900) | "\f0ea" |
| | Solid (900) | "\f04c" |
| | Solid (900) | "\f28b" |
| | Solid (900) | "\f1b0" |
| | Solid (900) | "\f304" |
| | Solid (900) | "\f305" |
| | Solid (900) | "\f14b" |
| | Solid (900) | "\f295" |
| | Solid (900) | "\f095" |
| | Solid (900) | "\f098" |
| | Solid (900) | "\f2a0" |
| | Solid (900) | "\f04b" |
| | Solid (900) | "\f144" |
| | Solid (900) | "\f0e7" |
| | Solid (900) | "\f02f" |
| | Solid (900) | "\f029" |
| | Solid (900) | "\f02a" |
| | Solid (900) | "\f079" |
| | Solid (900) | "\f01e" |
| | Solid (900) | "\f2f9" |
| | Solid (900) | "\f018" |
| | Solid (900) | "\f135" |
| | Solid (900) | "\f09e" |
| | Solid (900) | "\f143" |
| | Solid (900) | "\f002" |
| | Solid (900) | "\f010" |
| | Solid (900) | "\f00e" |
| | Solid (900) | "\f21a" |
| | Solid (900) | "\f064" |
| | Solid (900) | "\f1e0" |
| | Solid (900) | "\f1e1" |
| | Solid (900) | "\f14d" |
| | Solid (900) | "\f132" |
| | Solid (900) | "\f07a" |
| | Solid (900) | "\f290" |
| | Solid (900) | "\f291" |
| | Solid (900) | "\f090" |
| | Solid (900) | "\f2f6" |
| | Solid (900) | "\f1e6" |
| | Solid (900) | "\f0e8" |
| | Solid (900) | "\f118" |
| | Solid (900) | "\f0dc" |
| | Solid (900) | "\f0de" |
| | Solid (900) | "\f0dd" |
| | Solid (900) | "\f0d8" |
| | Solid (900) | "\f0d7" |
| | Solid (900) | "\f161" |
| | Solid (900) | "\f163" |
| | Solid (900) | "\f021" |
| | Solid (900) | "\f005" |
| | Solid (900) | "\f089" |
| | Solid (900) | "\f049" |
| | Solid (900) | "\f051" |
| | Solid (900) | "\f0f1" |
| | Solid (900) | "\f164" |
| | Solid (900) | "\f165" |
| | Solid (900) | "\f02b" |
| | Solid (900) | "\f02c" |
| | Solid (900) | "\f0ae" |
| | Solid (900) | "\f120" |
| | Solid (900) | "\f034" |
| | Solid (900) | "\f035" |
| | Solid (900) | "\f00a" |
| | Solid (900) | "\f009" |
| | Solid (900) | "\f00b" |
| | Solid (900) | "\f043" |
| | Solid (900) | "\f205" |
| | Solid (900) | "\f204" |
| | Solid (900) | "\f014" |
| | Solid (900) | "\f1bb" |
| | Solid (900) | "\f091" |
| | Solid (900) | "\f0d1" |
| | Solid (900) | "\f26c" |
| | Solid (900) | "\f0e9" |
| | Solid (900) | "\f0cd" |
| | Solid (900) | "\f127" |
| | Solid (900) | "\f3c2" |
| | Solid (900) | "\f093" |
| | Solid (900) | "\f007" |
| | Solid (900) | "\f0f0" |
| | Solid (900) | "\f234" |
| | Solid (900) | "\f2bd" |
| | Solid (900) | "\f0c7" |
| | Solid (900) | "\f03d" |
| | Solid (900) | "\f027" |
| | Solid (900) | "\f026" |
| | Solid (900) | "\f028" |
| | Solid (900) | "\f1eb" |
| | Solid (900) | "\f0ad" |
| | Regular (400) | "\f2c2" |
| | Regular (400) | "\f2c3" |
| | Regular (400) | "\f03e" |
| | Regular (400) | "\f03c" |
| | Regular (400) | "\f240" |
| | Regular (400) | "\f11c" |
| | Regular (400) | "\f2d2" |
| | Regular (400) | "\f041" |
| | Regular (400) | "\f076" |
| | Regular (400) | "\f182" |
| | Regular (400) | "\f1ea" |
| | Regular (400) | "\f1d8" |
| | Regular (400) | "\f28b" |
| | Regular (400) | "\f144" |
| | Regular (400) | "\f059" |
| | Regular (400) | "\f1d9" |
| | Regular (400) | "\f0c7" |
| | Regular (400) | "\f14d" |
| | Regular (400) | "\f110" |
| | Regular (400) | "\f0c8" |
| | Regular (400) | "\f005" |
| | Regular (400) | "\f089" |
| | Regular (400) | "\f164" |
| | Regular (400) | "\f165" |
| | Regular (400) | "\f247" |
| | Regular (400) | "\f014" |
| | Regular (400) | "\f007" |
| | Regular (400) | "\f2c0" |
| | Brands (400) | "\f208" |
| | Brands (400) | "\f1aa" |
| | Brands (400) | "\f1cc" |
| | Brands (400) | "\f274" |
| | Brands (400) | "\f0e1" |
| | Brands (400) | "\f08c" |
| | Brands (400) | "\f17c" |
| | Brands (400) | "\f136" |
| | Brands (400) | "\f207" |
| | Brands (400) | "\f23a" |
| | Brands (400) | "\f188" |
| | Brands (400) | "\f19b" |
| | Brands (400) | "\f26a" |
| | Brands (400) | "\f26b" |
| | Brands (400) | "\f18c" |
| | Brands (400) | "\f1ed" |
| | Brands (400) | "\f0d2" |
| | Brands (400) | "\f231" |
| | Brands (400) | "\f0d3" |
| | Brands (400) | "\f1a1" |
| | Brands (400) | "\f1d0" |
| | Brands (400) | "\f1a9" |
| | Brands (400) | "\f282" |
| | Brands (400) | "\f1a8" |
| | Brands (400) | "\f18b" |
| | Brands (400) | "\f275" |
| | Brands (400) | "\f276" |
| | Brands (400) | "\f277" |
| | Brands (400) | "\f278" |
| | Brands (400) | "\f17e" |
| | Brands (400) | "\f198" |
| | Brands (400) | "\f1e7" |
| | Brands (400) | "\f1be" |
| | Brands (400) | "\f1bc" |
| | Brands (400) | "\f18d" |
| | Brands (400) | "\f16c" |
| | Brands (400) | "\f1b6" |
| | Brands (400) | "\f1b7" |
| | Brands (400) | "\f1a4" |
| | Brands (400) | "\f1a3" |
| | Brands (400) | "\f1d5" |
| | Brands (400) | "\f262" |
| | Brands (400) | "\f181" |
| | Brands (400) | "\f174" |
| | Brands (400) | "\f1e8" |
| | Brands (400) | "\f099" |
| | Brands (400) | "\f081" |
| | Brands (400) | "\f299" |
| | Brands (400) | "\f27d" |
| | Brands (400) | "\f194" |
| | Brands (400) | "\f1ca" |
| | Brands (400) | "\f189" |
| | Brands (400) | "\f1d7" |
| | Brands (400) | "\f1d6" |
| | Brands (400) | "\f232" |
| | Brands (400) | "\f266" |
| | Brands (400) | "\f17a" |
| | Brands (400) | "\f19a" |
| | Brands (400) | "\f168" |
| | Brands (400) | "\f169" |
| | Brands (400) | "\f23b" |
| | Brands (400) | "\f1d4" |
| | Brands (400) | "\f167" |
| | Brands (400) | "\f16a" |
| | Brands (400) | "\f16b" |
2. روابط CDN وأكواد التضمين (من cdnjs)
شبكة توصيل المحتوى (CDN) هي الطريقة الأسهل والأسرع لتضمين مكتبة Font Awesome في موقعك. لا تحتاج لتحميل أي ملفات، فقط انسخ كود التضمين المناسب وضعه في قسم <head></head> لصفحتك.
تأكد دائمًا من استخدام أحدث إصدار متوفر على cdnjs أو الموقع الرسمي.
all.min.css (الخيار الموصى به)
هذا الملف يحتوي على كل شيء: جميع أنماط الأيقونات المجانية (Solid, Regular, Brands) وتعريفات خطوط الويب الضرورية. هو الخيار الأسهل والأكثر شيوعًا لمعظم الاستخدامات.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
all.min.js (للـ SVG والميزات المتقدمة)
هذا الملف يستخدم بشكل أساسي إطار عمل Font Awesome المعتمد على SVG. يقوم بتحويل وسوم <i></i> إلى عناصر <svg></svg> ديناميكيًا ويتيح ميزات متقدمة. غير ضروري إذا كنت تستخدم طريقة CSS content فقط.
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/all.min.js" integrity="sha512-GWzVrcGlo0TxTRvz9ttioyYJ+Wwk9Ck0G81D+eO63BaqHaJ3YZX9wuqjwgfcV/MrB2PhaVX9DkYVhbFpStnqpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
solid.min.css (نمط Solid فقط)
استخدم هذا الملف إذا كنت تحتاج فقط إلى الأيقونات من النمط الصلب (Solid) وتريد تقليل حجم الملف المحمل قليلاً. يجب أن يكون لديك سبب وجيه لعدم استخدام all.min.css.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/solid.min.css" integrity="sha512-TKLpVZGNBGMuV/vy0SsoWnMI1t7aiANnvdB+QIZpyGUTTDrPjpPA2Mh/rsS25U/Ldf+MAOAJ9O4rc2ch7GZlMA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
regular.min.css (نمط Regular فقط)
استخدم هذا الملف إذا كنت تحتاج فقط إلى الأيقونات من النمط العادي (Regular).
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/regular.min.css" integrity="sha512-TzeemTchJ5Zifxtr7dJ+8fs0jLqMD408hRj9BP5Vbduj89kR+UzhYhS3Tq/3kYxvcWnwOdF0g8m20oQykVZQBQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
brands.min.css (نمط Brands فقط)
استخدم هذا الملف إذا كنت تحتاج فقط إلى أيقونات العلامات التجارية (مثل فيسبوك، تويتر، جوجل).
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/brands.min.css" integrity="sha512-8RxmFOVaKQeACRlp PottærtC ماموتوولى للخدمات والتوريدات / لخدمات الإنترنت والتسويق الإلكتروني" crossorigin="anonymous" referrerpolicy="no-referrer" />
v4-shims.min.css (للتوافق مع الإصدار 4)
إذا كان لديك موقع قديم يستخدم أسماء الكلاسات من Font Awesome 4، يمكنك إضافة هذا الملف بالإضافة إلى ملف CSS الرئيسي (مثل all.min.css) للمساعدة في ترجمة الكلاسات القديمة إلى الجديدة.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/v4-shims.min.css" integrity="sha512-NVvNKpWyhVcS6+J4NfBVpBH7+peqxx7AIHq63+NJE0guLYXKDQD6Pf2cvRIsfH73/jrmBYLPmL2Gc2S+J0+hkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
3. طريقة استخدام CSS Pseudo-elements
الفكرة هي تطبيق الأيقونة على عنصر HTML باستخدام كلاس CSS مخصص، وتحديد الأيقونة عبر خاصية content وقيمة الـ Unicode الخاصة بها.
الكود الأساسي في CSS:
/* مثال لكلاس CSS لتطبيق أيقونة */
.my-icon-class::before { /* أو ::after */
/* 1. اختر عائلة الخط المناسبة */
font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands";
/* 2. حدد وزن الخط حسب نمط الأيقونة */
font-weight: 900; /* مثال: Solid */
/* 3. ضع قيمة Unicode للأيقونة المطلوبة من الجدول أدناه */
content: "\f007"; /* مثال: user */
/* 4. خصائص أساسية لتنسيق الخط */
display: inline-block; font-style: normal; /* ... باقي الخصائص ... */
/* 5. تنسيقات إضافية (اختياري) */
margin-left: 7px; color: blue; font-size: 1.2em;
}
ملاحظة هامة: لا يمكن استخدام
::before أو ::after مباشرة مع عناصر مثل ![]()
4. جدول قيم Unicode للأيقونات (عينة كبيرة)
تنويه: هذا الجدول يحتوي على عينة كبيرة جدًا من أيقونات Font Awesome 6 المجانية. للقائمة الكاملة والمحدثة، زر صفحة البحث الرسمية.
| الأيقونة | النمط | Unicode |
|---|---|---|
| | Solid (900) | "\e550" |
| | Solid (900) | "\e551" |
| | Brands (400) | "\f16d" |
| الأيقونة | النمط | Unicode |
|---|---|---|
| | Solid (900) | "\f251" |
| | Solid (900) | "\f252" |
| | Brands (400) | "\f16b" |