كيفية استخدام أيقونات Font Awesome في WordPress

إذا كنت ترغب في استخدام أيقونات Font Awesome في موقع WordPress الخاص بك ، فإن أول شيء عليك القيام به هو تثبيت وتفعيل المكون الإضافي Font Awesome Icons. لمزيد من المعلومات ، راجع مقالتنا حول كيفية تثبيت مكون WordPress الإضافي. بمجرد تنشيط المكون الإضافي ، ستحتاج إلى تعديل سمة WordPress الخاصة بك لتضمين ملف Font Awesome CSS. أسهل طريقة للقيام بذلك هي عن طريق إضافة الكود التالي إلى ملف function.php الخاص بالقالب الخاص بك: add_action ('wp_enqueue_scripts'، 'enqueue_font_awesome')؛ function enqueue_font_awesome () {wp_enqueue_style ('font-awesome'، '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'، array ()، '4.0.3')؛ } سيقوم هذا الرمز بتحميل ملف Font Awesome CSS من Bootstrap CDN. إذا كنت تفضل ذلك ، يمكنك تنزيل ملف Font Awesome CSS واستضافته على الخادم الخاص بك. بمجرد تحميل ملف Font Awesome CSS ، يمكنك البدء في استخدام الرموز في موقع WordPress الخاص بك. على سبيل المثال ، يمكنك إضافة رمز إلى قائمتك مثل: جهة الاتصال الرئيسية يمكنك أيضًا استخدام رموز Font Awesome في المحتوى الخاص بك. على سبيل المثال ، يمكنك إضافة رمز إلى قائمة مثل هذا: هذا هو العنصر الأول هذا هو العنصر الثاني هذا هو العنصر الثالث ويمكنك إضافة رمز إلى ارتباط مثل هذا: تابعني على Twitter الاحتمالات لا حصر لها! لمزيد من المعلومات ، راجع موقع Font Awesome على الويب.

نتيجة لذلك ، يعد استخدام مكتبة Font Awesome على موقع WordPress الخاص بك أمرًا بسيطًا نسبيًا. ستتمكن من تقليل وقت تحميل الصفحة بعد اتباع هذه الخطوات البسيطة. لن يكون من الضروري استخدام الرموز كخطوط لموقعك. يمكن تحريرها بأي طريقة يمكنك عادةً تضمينها في خط. يعد المكون الإضافي Font Awesome WordPress مناسبًا للأشخاص الذين لا يرتاحون للذهاب إلى موضوعهم أو ملفاتهم لإدخال الكود المطلوب. تتضمن خطة Pro 1500 رمزًا مجانًا ، بالإضافة إلى أكثر من 5000 اختلاف. يمكنك إضافة أي رمز تريده عن طريق كتابة و / أو تحرير class = fab fa-wordpress إلى أي لغة.

في لوحة معلومات WP ، انقر فوق Appearance - Editor ، ثم ملف header.php. تحقق من موضع السطر الذي يحتوي على الرمز قبل النقر فوقه ، ثم الصق نفس الرمز من Font Awesome. سيتطلب ذلك البحث في الملفات الأساسية لموضوعك ، لكنها ستكون عملية بسيطة وسريعة. بعد تثبيت Font Awesome ، ستحتاج إلى التأكد من وضع الرموز بشكل صحيح. من الممكن تضمين التصميم في أوراق الأنماط الخاصة بك أو القيام بذلك بشكل مضمّن. اللون والحجم هما أكثر الأنماط استخدامًا. يمكنك تعديل الرمز في <div> الخاص به لجعله يعمل في قيودك إذا كنت تريد أن يكون نسبيًا لحجم معين ولكن القيم المطلقة ليست كذلك.

يمكن العثور على خيار قائمة Font Awesome Icon في شريط التنسيق الممتد عندما تكون في كتلة نص Gutenberg (أو أعلى شريط التنسيق في محرر WordPress Classic). يسمح لك منتقي الأيقونات بالبحث عن أيقونات Font Awesome حسب اسم الأيقونة أو الفئة أو الكلمة الأساسية.

كيف يمكنني استخدام Font Awesome في WordPress Theme؟

إذا كنت ترغب في استخدام Font Awesome في قالب WordPress الخاص بك ، فهناك عدة طرق يمكنك اتباعها. تتمثل إحدى الطرق في استخدام مكون إضافي مثل Better Font Awesome ، والذي سيمنحك صفحة إعدادات حيث يمكنك بسهولة تمكين أو تعطيل رموز Font Awesome على موقعك. هناك طريقة أخرى تتمثل في إضافة كود Font Awesome يدويًا إلى قالبك. يمكنك العثور على الكود الخاص بكل رمز على موقع Font Awesome. بمجرد حصولك على الشفرة ، يمكنك إضافتها إلى ملف CSS الخاص بقالبك أو في أي مكان تريد تضمينه فيه.

أنشأ الفريق في Font Awesome برنامجًا تعليميًا جديدًا حول كيفية استخدام :: before pseudo-element لإضافة رموز إلى صفحاتك باستخدام CSS في الإصدار 4.7 من التطبيق. باستخدام هذا البرنامج التعليمي ، لن تحتاج إلى استخدام الصور أو نسخ ولصق رمز لإضافة رموز إلى صفحاتك.
إذا كان لديك الإصدار المجاني من Font Awesome مثبتًا ، فقد تفقد بعض الأيقونات في إصدار Pro. إذا لم يكن هذا خيارًا ، فيمكنك إما الحصول على الرموز المجانية البديلة أو الترقية إلى اشتراك Pro.
إذا كنت ترغب في إضافة رموز إلى صفحاتك دون الحاجة إلى استخدام الصور أو التعليمات البرمجية ، فإن طريقة :: before pseudoelement تعد خيارًا رائعًا. يعد استخدام هذا العنصر الزائف أمرًا بسيطًا إذا اتبعت البرنامج التعليمي المقدم من Font Awesome ، ويمكنك أيضًا إضافة رموز إلى صفحاتك.

هل يمكنني استخدام Font Awesome تجاريًا؟

Font Awesome مفتوح المصدر بالكامل ويأتي بترخيص GPL. يمكن استخدام البرنامج لأي مشروع ، من تجاري إلى مفتوح المصدر إلى شخصي بحت.

كيف يمكنني إضافة Font Awesome إلي WordPress بدون ملحقات؟

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

يمكن إضافة الرموز إلى WordPress دون أي معرفة بالبرمجة أو التصميم. رمز الخط قابل للتخصيص بالكامل وسريع الاستجابة ، وقد استبدل بعضها الصور التقليدية أو أوراق Sprite. يتم تثبيته حاليًا على أكثر من 80000 جهاز كمبيوتر وهو متوافق مع أحدث إصدار من WordPress. يمكن تغيير الرموز بشكل متكرر مثل الخطوط اليومية العادية. يمكنك تغيير الألوان والمحاذاة والارتفاع والنمط وما إلى ذلك باستخدام هذه الخيارات. يدعم كل متصفح تقريبًا رموز الخطوط. نظرًا لوجود العديد من أيقونات الخطوط المتاحة ، فإن استخدام الصور على مواقعنا الإلكترونية محدود.

توقف غالبية المصممين عن استخدام الصور التقليدية واستبدلوها برموز Font Awesome. الأيقونات هي أداة رائعة يمكن تعديلها بعدة طرق. عندما تقوم بتغيير حجم الرمز ، أو تدويره ، أو تغيير لونه ، أو تنفيذ إجراءات أخرى ، يمكنك أيضًا جعله أكثر مرونة. يجب نسخ الكود أدناه ولصقه في محرر WordPress الخاص بك. كيف تجعل Font Awesome يعمل في Elementor؟ ليست هناك حاجة لتغيير الملفات الأساسية أو تثبيت أي مكونات إضافية لموضوعك. توجد بالفعل رموز رائعة للخط في الإصدار المميز من Elementor. يسمح لك Better Font Awesome باستخدام الرموز القصيرة التي تم إنشاؤها باستخدام المكوّن الإضافي Font Awesome Icons و Font Awesome Shortcodes .

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

رائع للخط: مكون إضافي لبرنامج WordPress ضروري لموقعك على الويب

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

أضف Font Awesome إلى WordPress بدون البرنامج المساعد

تعد إضافة Font Awesome إلى WordPress بدون مكون إضافي عملية بسيطة إلى حد ما. أولاً ، ستحتاج إلى زيارة موقع Font Awesome على الويب وتنزيل أحدث إصدار من مكتبة Font Awesome. بعد ذلك ، ستحتاج إلى تحميل مكتبة Font Awesome إلى موقع WordPress الخاص بك. أسهل طريقة للقيام بذلك هي باستخدام عميل FTP. بمجرد تحميل مكتبة Font Awesome على موقع WordPress الخاص بك ، ستحتاج إلى إضافة بضعة أسطر من التعليمات البرمجية إلى ملف function.php الخاص بموضوع WordPress. الرمز الذي ستحتاج إلى إضافته هو:
add_action ('wp_enqueue_scripts'، 'enqueue_font_awesome') ؛
function enqueue_font_awesome () {
wp_enqueue_style ('font-awesome'، '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'، array ()، '4.0.3')؛
}
تعد إضافة Font Awesome إلى WordPress بدون مكون إضافي عملية بسيطة إلى حد ما. الرمز الذي ستحتاج إلى إضافته هو:
add_action ('wp_enqueue_scripts'، 'enqueue_font_awesome') ؛
function enqueue_font_awesome () {
wp_enqueue_style ('font-awesome'، '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'، array ()، '4.0.3')؛
}

باستخدام الخطوات أدناه ، ستتمكن من إضافة Font Awesome إلى موقع WordPress الخاص بك. الطرق الأكثر شيوعًا للقيام بذلك داخلية أو خارجية. أهم شيء هو التأكد من تحميل الخط بشكل صحيح. إذا لم يتم تكوين الخط والرابط بشكل صحيح ، أو إذا لم يظهر الرمز على الإطلاق. من السهل استخدام Font Awesome نظرًا لأن نسخه ولصقه لا يتطلب سوى بضعة أسطر. إذا كنت تستخدم Sass أو Less ، فستحتاج إلى تنزيل مجلد Font-awesome ووضعه في جذر المشروع. تتوفر بعض المكونات الإضافية لمساعدتك في عملية التثبيت. قد ترغب في إنشاء المكونات الإضافية الخاصة بك والتي يمكن استخدامها في العديد من المشاريع والسمات.

كيفية استخدام أيقونات Font Awesome في WordPress

ما عليك سوى تحديد أيقونات Font Awesome من قائمة WordPress. من السهل إضافة رمز إلى أي صفحة عن طريق إضافة * i class = fab fa-wordpress * / i. تحقق من مكتبة الرموز للحصول على اقتراحات حول ما يجب تضمينه. من المهم ملاحظة أن الرموز القصيرة في المكون الإضافي لا تعمل دائمًا.

إليك كيفية استخدام Font Awesome Icons على موقع WordPress الخاص بك في عام (2121). إنها واحدة من أكثر مكتبات الأيقونات شيوعًا على الويب. كيف يمكنك تكوين Font Awesome على WordPress بعدة طرق؟ ستتعلم كيفية دمج Font Awesome بسلاسة مع WordPress في هذه المقالة. عندما لا تعرف كيفية استخدام أيقونات Font Awesome على موقع الويب الخاص بك ، فإن استضافتها على خادمك هو الخيار الأفضل. الملفات الوحيدة التي يمكن إضافتها هي تلك التي ستستخدمها على موقع WordPress الخاص بك إذا كنت تستضيف الرموز بنفسك. ما يميز Font Awesome كحزمة أيقونات هو قدرته على تخصيص مظهر الرموز وتغييره.

يمكن لمستخدمي WordPress الوصول إلى Font Awesome باستخدام الطرق التالية. إذا لم يكن لديك أي خبرة في الترميز ، فسيكون تخصيص الرموز أكثر صعوبة. يمكن استخدام المكوِّن الإضافي للكتل Gutenberg Stackable ، والذي تم تثبيته كتنزيل مجاني ، مع Font Awesome لتسهيل استخدامه. تتيح لك ميزة Stackable تحديد تصميمات متميزة مسبقة الصنع تتوافق مع جودة أيقونات Font Awesome. يمكنك الوصول إلى أيقونات أي حساب Font Awesome Pro بالانتقال إلى كتلة الرموز. ستتعامل Stackable مع عملية التسجيل نيابة عنك ، لذلك ليست هناك حاجة للتسجيل للحصول على حساب أو إنشاء Kit Code. ليس من الضروري أن يكون لديك معرفة بالترميز لتغيير مظهر الرموز. هذا متاح فقط لأولئك الذين يشترون الخطط المجانية والاحترافية.

إذا كنت لا تستخدم Font Awesome Pro ، فيجب أن تبحث عن الرموز المجانية في قائمة أيقونات Font Awesome Standard . إذا كنت تستخدم Font Awesome Pro ، فستحتاج إلى الرجوع إلى بادئة النمط الصحيحة بالإضافة إلى الملفات الداعمة. إذا كنت تستخدم دليل النمط ، فيمكنك التعرف على كيفية استخدام الخط. إليك بعض أيقونات Pro الرائعة. إذا كان لديك اشتراك Font Awesome Standard أو أعلى ، فيجب عليك استخدام رموز Pro أيضًا.