كيف تضيف أيقونات الـ Font Awesome إلى موقعك

مواضيع مفضلة

كيف تضيف أيقونات الـ Font Awesome إلى موقعك



    أيقونات Font Awesome أحد أكثر العناصر التي تستخدم في تصاميم المواقع , بحيث تعتمد على أكواد الـ CSS لإنشاء أو استدعاء أيقونات الـ Font Awesome .
لا بد و أنك لاحظت بعض المواقع التي تستخدم أيقونات الـ Font Awesome مثل أيقونة المنزل للصفحة الرئيسية أو أيقونة الكومبيوتر , .....  .

طريقة إضافة أيقونت Font Awesome للموقع

أيقونات الـ Font Awesome لإضافتها يتوجب علينا استدعائها من المكتبة الخاصة بالأيقونات .
أولا إليك الكود الخاص بمكتبة Font Awesome التالي : 

إلصقه فوق وسم </head> في قالب موقعك

ثانيا نأتي إلى كيفية إنشاء أيقونات الـ Font Awesome بعد أن أضفنا كود المكتبة
لإنشاء أي أيقونة يتوجب عليك أن تكتب إسم الأيقونة الخاص داخل تعليمة class='#'
مثال عن أيقونة المنزل :
<a href='#'><i class="fa fa-home"/></a>
ستظهر بالشكل التالي :

إسم أيقونة الذي كتبناه هو fa fa-home

إليك مجموعة من أسماء الأيقونات اللتي يمكن لك إنشائها :

fab fa-accessible-icon &#xf368;
fas fa-american-sign-language-interpreting &#xf2a3;
fas fa-assistive-listening-systems &#xf2a2;
fas fa-audio-description &#xf29e;
fas fa-blind &#xf29d;
fas fa-braille &#xf2a1;
fas fa-closed-captioning &#xf20a;
far fa-closed-captioning &#xf20a;
fas fa-deaf &#xf2a4;
fas fa-low-vision &#xf2a8;
fas fa-phone-volume &#xf2a0;
fas fa-question-circle &#xf059;
far fa-question-circle &#xf059;
fas fa-sign-language &#xf2a7;
fas fa-tty &#xf1e4;
fas fa-universal-access &#xf29a;
fas fa-wheelchair &#xf193;
طبعا هذه مجموعة صغيرة من أيقونات الـ Font Awesome و للمزيد من الأيقونات أنصحك بزيارة موقع w3schools , ستجد كم هائل من الأيقونات كل ما عليك هو أخذ اسم الأيقونة التي اخترتها و لصقها بين مزدوجتي class='#' .
بالتوفيق للجميع .

Post a Comment

المشاركة على واتساب متوفرة فقط في الهواتف