كيفية استخدام Font Awesome v5.7.2 مع HTML

Font Awesome هي إحدى الطرق الأكثر شيوعًا لإضافة الرموز إلى موقعك. ولكن ماذا لو أضفت CDN إلى عنصر صفحتك وكل ما تراه هو مستطيلات سوداء؟

إليك بعض الأشياء التي يجب وضعها في الاعتبار عند إضافة Font Awesome إلى مشروعك التالي.

أضف الرابط إلى الرأس

تخيل أن لديك HTML التالي:

مثل شبكات CDN الأخرى ، تحتاج إلى إضافة عنصر إلى ملف . بالنسبة إلى Font Awesome 5.7.2 ، سيبدو كما يلي:

عبر الإنترنت مقابل المحلي

إذا قمت بتشغيل الكود التالي في محرر مستند إلى الويب مثل CodePen أو CodeSandbox ، فإن الكود التالي يعرض الرموز بشكل صحيح:

ولكن إذا حاولت فتح الصفحة محليًا في متصفح ، فستظل ترى المستطيلات السوداء بدلاً من الرموز:

نلقي نظرة أخرى على hrefفي العنصر أعلاه. هل تراه؟

تكمن المشكلة في أنه عند تحميل الصفحة من نظام الملفات المحلي لديك ، يحاول المستعرض العثور على ملف Font Awesome CSS في جذر نظام الملفات.

لجعل الأشياء تعمل عبر الإنترنت ومحليا ، تأكد من إضافة مخطط URL (HTTP ، أو HTTPS أفضل) إلى href:

ماذا يحدث هنا؟

عندما تترك نظام URL ( href="//use.fontawesome...") ، يستخدم المتصفح نفس نظام URL الذي تم تحميل الصفحة به.

لذلك إذا قمت بتشغيل الصفحة محليًا عن طريق تشغيل ملف HTML في مستعرض ، hrefيفترض أن Font Awesome CSS هو أيضًا ملف محفوظ محليًا ( file:).

فقط تأكد من أن hrefسمات العناصر الخاصة بك تشير جميعها إلى عنوان URL الكامل ، بما في ذلك مخطط URL ، ويجب أن تكون على ما يرام.