كيفية إضافة Font Awesome إلى موقع ووردبريس الخاص بك

كيفية إضافة Font Awesome إلى موقع ووردبريس الخاص بك
فريق دكتورميجا
آخر تحديث بتاريخ يوليو 17, 2024
0
LinkedIn

يعتبر Font Awesome رائعًا للمصممين من جميع مستويات المحترفة. إذا كنت مستعدًا لإضافته إلى موقع ووردبريس الخاص بك، فلديك بعض الخيارات – هل تريد تضمين الملفات داخليًا أو خارجيًا؟ أهم شيء هو التأكد من تحميل الخط بشكل موثوق ويمكن الرجوع إليه في جميع الأوقات. إذا اخترت تضمين الملفات داخليًا، فيمكنك تحميلها وربطها بمسار الملف، بينما سترتبط خارجيًا بـ stylesheet. دعنا نتعمق في كيفية إضافة Font Awesome.

قم بتحميل Font Awesome وقم بتضمين Fonts / CSS يدويًا

إذا اخترت السير في الطريق المحلي، فهناك عدة خيارات يجب وضعها في الاعتبار.

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

استخدام النسخة المحلية في قالب الطفل الخاص بك

هل Font Awesome خاص بالقالب؟ إذا كان الأمر كذلك، فهناك طريقتان للإضافة إلى القالب او التصميم الخاص بك.

إضافة إلى الهيدر

ملف header.php هو المكان الذي سينتقل إليه رابط Stylesheet، ويجب أن يكون موجودًا بين علامتي الفتح والإغلاق <head>. قبل إضافة معلومات مسار الملف، تأكد من أن لديك جميع ملفات Font Awesome المطلوبة.

يجب إضافة ملفات الخطوط إلى دليل الخطوط، ابحث عن علامة <head> في ملف header.php ثم الصق المسار إلى ملف font-awesome.min.css، يجب أن يبدو مثل هذا:

<link rel="stylesheet" href="مسار مجلد الملف/font-awesome/css/font-awesome.min.css">

#ثم اضف هذا النص بموقعك
<i class="fa fa-home"></i>

أضف إلى ملف Functions

إذا كنت تفضل إضافة هذا إلى ملف function.php، فيمكن القيام بذلك بسهولة. يفضل بعض المصممين الاحتفاظ بجميع التخصيصات في مكان واحد، وهذه طريقة رائعة للقيام بذلك.

function add_font_awesome()
{
wp_enqueue_style( 'style', get_stylesheet_uri() );
wp_enqueue_style( 'font-awesome', get_template_directory_uri().'مسار مجلد الملف/font-awesome/css/font-awesome.min.css' );
}
add_action( 'wp_enqueue_scripts', 'add_font_awesome' )

مثل المثال أعلاه ، تأكد من إعادة التحقق من المسار إلى ملف CSS. إذا كان هذا المسار غير صحيح، فلن يعمل الخط.

استخدم نسخة خارجية من Font Awesome

تنطبق نفس الخيارات عند استخدام نسخة خارجية، فالأمر يختلف باختلاف المسار المؤدي إلى ملف Font Awesome.

إضافة إلى الهيدر

ملف header.php هو المكان الذي سنضع فيه رابطًا لملفات Font Awesome المستضافة. انه سهل جدا. كل ما يتطلبه الأمر هو نسخ ولصق.

ابحث عن علامة في ملف header.php ثم الصقها في علامة الهيد (head):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/6.3.0/css/font-awesome.min.css">

قائمة الانتظار في ملف Functions

أو الأفضل من ذلك، استخدم دالة wp_enqueue_style. لتحميل Font Awesome، أضف ما يلي في function.php للقالب الفرعي:

add_action( 'wp_enqueue_scripts', 'add_font_awesome' );

function add_font_awesome() {
wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/6.3.0/css/font-awesome.min.css

' );
}

خيارات الإضافة

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

لا تجد المكون الإضافي المثالي؟ قد ترغب في كتابة المكون الإضافي الخاص بك والذي يمكنك استخدامه في مشاريع متعددة وعبر قوالب متعددة.

استخدام Sass أو LESS مع Font Awesome

هل أنت من محبي المعالجات المسبقة؟ إذا كان الأمر كذلك ، فستساعدك هذه على استخدام Font Awesome. للعمل مع الملفات، ستحتاج إلى تنزيل مجلد Font-awesome ووضعه في جذر مشروعك.

إذا كنت تستخدم Less، فافتح Font-awesome/less/variables.less الخاص بمشروعك. إذا كنت تستخدم Sass، فستجري تغييرات على ملف font-awesome/scss/_variables.scss. قم بفتح وتعديل المتغير @fa-font-path بحيث يشير إلى الدليل الصحيح، والذي يشبه $fa-font-path:"Fonts“؛ بمجرد إعادة التحويل البرمجي، يمكنك بعد ذلك اختبار التغييرات.

الخاتمة

من السهل معرفة كيفية إضافة Font Awesome على نطاق واسع. من خلال الإعداد السهل، يتوفر للمصممين مجموعة متنوعة من الرموز التي يسهل تخصيصها وإضافتها إلى الويب.

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

LinkedIn
قد يعجبك ايضاً
كيفية إزالة وضع المحرر المرئي في ووردبريس

كيفية إزالة وضع المحرر المرئي في ووردبريس

كيفية إضافة خطوط ووردبريس مخصصة (الطرق الصحيحة)

كيفية انشاء صفحة مقصودة مثالية فى ووردبريس

كيفية انشاء صفحة مقصودة مثالية فى ووردبريس

اترك تعليقاً

اشترك في النشرة الإخبارية

المشاركات الاخيرة