دليل شامل لاستخدام Font Awesome v5.7.2 مع HTML: أضف أيقونات احترافية لموقعك

Updated يونيو 15, 2026 4 min read

Aldawsari

دقائق القراءة: 4

تعد مكتبة Font Awesome أحد الحلول الأكثر شيوعًا وفعالية لإضافة أيقونات جذابة واحترافية إلى مواقع الويب الخاصة بك. هذه الأيقونات، التي تتراوح من أيقونات وسائل التواصل الاجتماعي إلى الرموز التعبيرية الشائعة، تساهم بشكل كبير في تحسين تجربة المستخدم وجمالية التصميم. ولكن، قد يواجه بعض المطورين مشكلة محيرة بعد إضافة رابط CDN الخاص بالمكتبة إلى قسم <head> في صفحتهم، حيث تظهر لهم مربعات سوداء بدلاً من الأيقونات المتوقعة.

في هذا الدليل، سنتناول كيفية استخدام Font Awesome v5.7.2 مع HTML، مع التركيز على حل هذه المشكلة الشائعة وضمان عرض الأيقونات بشكل صحيح، سواء كنت تعمل على بيئة تطوير محلية أو على خادم مباشر.

أساسيات تضمين Font Awesome في ملفات HTML

إضافة رابط CDN في قسم <head>

لتضمين Font Awesome في مشروعك، يجب عليك أولاً إضافة رابط CDN (شبكة توصيل المحتوى) الخاص بالمكتبة إلى قسم <head> في ملف HTML الخاص بك. هذا الرابط يسمح لمتصفح الويب بتحميل ملفات CSS الضرورية لعرض الأيقونات.

تخيل أن لديك الهيكل الأساسي التالي لملف HTML:

 <!DOCTYPE html > 
 < html > 
 < head > 
 < title > </ title > 
 < link rel = "stylesheet" type = "text/css" href = "testing.css" > 
 < link rel = "stylesheet" type = "text/css" href = "css/all.css" > 
 < meta name = "viewport" content = "width=device-width, initial-scale=1 user-scalable=no" > 
 </ head > 
 < body > 
 < i class = "fab fa-github-square" > 
 < a href = "https://github.com/willyblackkeez" id = "profile-link" > </ a > 
 </ i > 
 < i class = "fab fa-facebook" > </ i > 
 </ body > 
 </ html >

كما هو الحال مع معظم مكتبات CDN الأخرى، فإن تضمين Font Awesome يتطلب إضافة وسم <link> إلى قسم <head>. بالنسبة لإصدار Font Awesome 5.0.7 (المستخدم في الأمثلة البرمجية المرفقة)، سيبدو الرابط كالتالي:

<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.7/css/all.css">

فهم الفروقات بين التشغيل المحلي والتشغيل عبر الإنترنت

لماذا قد تظهر المربعات السوداء محليًا؟

عند تشغيل الكود التالي في محرر ويب مباشر مثل CodePen أو CodeSandbox، ستلاحظ أن الأيقونات تظهر بشكل صحيح تمامًا:

 <!DOCTYPE html > 
 < html > 
 < head > 
 < title > </ title > 
 < link rel = "stylesheet" href = "//use.fontawesome.com/releases/v5.0.7/css/all.css" > 
 < link rel = "stylesheet" type = "text/css" href = "testing.css" > 
 < link rel = "stylesheet" type = "text/css" href = "css/all.css" > 
 < meta name = "viewport" content = "width=device-width, initial-scale=1 user-scalable=no" > 
 </ head > 
 < body > 
 < i class = "fab fa-github-square" > 
 < a href = "https://github.com/willyblackkeez" id = "profile-link" > </ a > 
 </ i > 
 < i class = "fab fa-facebook" > </ i > 
 </ body > 
 </ html >

ولكن إذا حاولت فتح نفس الصفحة محليًا في متصفحك مباشرة من نظام الملفات، فمن المحتمل أن تستمر في رؤية المربعات السوداء بدلاً من الأيقونات:

السبب وراء هذه المشكلة يكمن في طريقة معالجة المتصفح لمسار href في وسم <link>. عندما لا تحدد البروتوكول (مثل http: أو https:) في مسار href (على سبيل المثال، href="//use.fontawesome...")، فإن المتصفح يفترض استخدام نفس البروتوكول الذي تم تحميل الصفحة به.

فعندما تقوم بتشغيل ملف HTML محليًا، يستخدم المتصفح بروتوكول file:. وبالتالي، يحاول المتصفح البحث عن ملف CSS الخاص بـ Font Awesome ضمن نظام الملفات المحلي الخاص بك، بدلاً من تحميله من الـ CDN عبر الإنترنت. هذا يؤدي إلى فشل تحميل الأيقونات وظهور المربعات السوداء.

الحل الأمثل: تحديد بروتوكول HTTPS دائمًا

لضمان عمل Font Awesome بشكل صحيح سواء عبر الإنترنت أو محليًا، يجب عليك دائمًا تضمين مخطط URL الكامل (يفضل HTTPS لضمان الأمان والأداء) في سمة href الخاصة برابط CDN.

الصيغة الصحيحة يجب أن تكون كالتالي:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">

بتحديد https:// بشكل صريح، فإنك تخبر المتصفح بوضوح أن يقوم بتحميل ملف CSS من الخادم البعيد عبر بروتوكول HTTPS، بغض النظر عن كيفية تحميل الصفحة الحالية (محليًا أو عبر الإنترنت).

الخلاصة التقنية

إن دمج الأيقونات في تصميم الويب يعزز بشكل كبير من جاذبية الموقع وسهولة استخدامه. مكتبة Font Awesome توفر مجموعة واسعة من الأيقونات التي يمكن تخصيصها بسهولة. النقطة المحورية التي يجب تذكرها هي أهمية تحديد البروتوكول الكامل (https://) في روابط CDN. هذا لا يضمن فقط التوافقية عبر بيئات التشغيل المختلفة (محليًا وعبر الإنترنت)، بل يعزز أيضًا من أمان تحميل الموارد. تجاهل هذه التفصيلة البسيطة يمكن أن يؤدي إلى تجربة مستخدم سيئة ومشاكل في العرض، مما يؤثر على احترافية الموقع. لذا، كن دائمًا دقيقًا في تضمين روابط الموارد الخارجية.