كيفية إضافة أيقونات Font Awesome إلى WordPress - الدليل الكامل

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

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

دعونا نحفر ...

لماذا يجب أن تأخذ الوقت الكافي لإضافة رموز Font Awesome إلى WordPress

تعتبر أيقونات Font Awesome رائعة لأنها ، كما يوحي الاسم ، خط رمز ، وليست صورًا. هذا يعني أنه يمكنك القيام بأشياء رائعة مثل:

• تغيير الحجم دون فقدان الجودة لأن الرموز عبارة عن ناقلات
• قم بتغيير الألوان وإضافة الرسوم المتحركة واستخدام معالجات CSS الأخرى

كل ما يقال ، أن أيقونات Font Awesome أفضل بكثير من مجرد استخدام صورة ثابتة.

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

كيفية إضافة أيقونات Font Awesome يدويًا إلى WordPress

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

بخلاف ذلك ، أحب هذه الطريقة للحصول على طريقة لطيفة وخفيفة الوزن لتشغيل Font Awesome وتشغيله.

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

إليك كيفية عمل العملية بأكملها ، خطوة بخطوة:

الخطوة 1: إدراج ورقة أنماط رائعة للخطوط في قالب WordPress الخاص بك

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

هذا الرابط حاليًا هو:

https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

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

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

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

نظرًا لأن اتباع أفضل ممارسات كود WordPress يعد أمرًا جيدًا ، فإنني أوصيك بالتأكيد باستخدام كل من سمة فرعية ووظيفة قائمة الانتظار.

حسنًا ، إليك كيفية القيام بذلك:

انتقل إلى المظهر ← المحرر وحدد ملف function.php لموضوع طفلك.

ثم الصق هذا الرمز:

add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
wp_enqueue_style( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
}

تأكد من حفظ التغييرات وانتهيت! ليس مؤلمًا جدًا ، أليس كذلك؟

الخطوة 2: إدراج أيقونات Font Awesome

بمجرد إدراج ورقة الأنماط في قائمة الانتظار ، يمكنك إدراج رموز Font Awesome في موقعك بالانتقال إلى البحث عن رمز Font Awesome والعثور على رمز تريد إدراجه:

عند النقر فوق أحد الرموز ، سيمنحك Font Awesome الرمز الذي تحتاجه لاستخدام الرمز:

كل ما عليك فعله هو وضع هذا الرمز في علامة تبويب النص في محرر WordPress لإضافة رمز إلى موقعك.

وهذا كل شيء! لقد نجحت في إضافة دعم Font Awesome إلى WordPress. الآن ، كل ما تبقى هو معرفة كيفية تصميم أيقونات Font Awesome على موقع WordPress الخاص بك.

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

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

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

بالإضافة إلى إضافة أحدث ورقة أنماط إلى موقعك دائمًا ، فإن Better Font Awesome أيضًا:

• يتيح لك استخدام الرموز القصيرة لتضمين أيقونات Font Awesome.
• يمنحك قائمة منسدلة في محرر TinyMCE لإدراج الرموز.

إذا كنت تخطط لاستخدام رموز Font Awesome بانتظام ، فقد تجعل هاتان الأداتان حياتك أسهل. لكن بالنسبة للاستخدام غير المتكرر ، أعتقد أن الطريقة اليدوية هي الخيار الأبسط لأنها خفيفة الوزن.

الخطوة 1: تثبيت وتنشيط البرنامج المساعد

لإضافة Font Awesome ، كل ما عليك فعله هو تثبيت البرنامج المساعد وتنشيطه. لا يوجد شيء آخر حقًا.

على الرغم من وجود لوحة إعدادات أساسية يمكنك الوصول إليها من خلال الانتقال إلى Settings → Better Font Awesome ، فأنت حر تمامًا في ترك كل شيء على أنه الإعداد الافتراضي.

الخطوة 2: إدراج أيقونات Font Awesome

لإدراج أيقونات Font Awesome مع المكون الإضافي ، لديك خياران مختلفان:

• استخدم الكود من موقع Font Awesome كما أوضحته في القسم السابق.
• استخدم الرموز القصيرة ، والتي يمكن إنشاؤها من القائمة المنسدلة.

نظرًا لأنني أوضحت لك بالفعل الطريقة الأولى في القسم السابق ، فسأعطيك نظرة سريعة على منشئ الرمز القصير المنسدل.

عندما تذهب لإنشاء منشور أو صفحة جديدة ، ستلاحظ وجود زر إدراج جديد بجوار الزر " إضافة وسائط" . إذا قمت بالنقر فوقه ، فسترى جميع أيقونات Font Awesome المتاحة ، بالإضافة إلى خيار لتصفية النتائج:

كل ما عليك فعله هو النقر فوق الرمز الذي اخترته وسيقوم المكون الإضافي بإدخال الرمز القصير المناسب:

وهذا كل ما في الأمر!

الآن بعد أن أصبح لديك دعم رمز Font Awesome ، فلنبحث في بعض الطرق التي يمكنك من خلالها تصميم أيقونات Font Awesome ومعالجتها.

كيفية تصميم أيقونات رائعة للخطوط وتغيير الأحجام

بغض النظر عن الطريقة التي استخدمتها لإضافة Font Awesome إلى WordPress ، ستستخدم نفس المبادئ الأساسية لتصميم أيقوناتك.

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

يتم سحب معظم هذه النصائح مباشرة من صفحة أمثلة Font Awesome ، لذلك لا داعي للقلق بشأن التوافق.

تغيير حجم أيقونات Font Awesome

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

لزيادة حجم الرمز ، يمكنك استخدام أي من هذه المعدلات:

• fa-lg - يزيد الحجم بنسبة 33٪
• fa-2x - يضاعف الحجم
• fa-3x - حجم ثلاثي
• fa-4x - ...
• fa-5x - ...

لاستخدام هذه المعدلات ، ما عليك سوى إضافتها بعد اسم الرمز (ولكن داخل علامات الاقتباس) للرمز ، وداخل اقتباسات الفئة للرمز القصير. فيما يلي مثال على مضاعفة حجم الرمز ثلاث مرات لكل من طريقتي التضمين:

• <i class = ”fa fa-download fa-3x ” aria-hidden = ”true”> </i>
• [اسم الرمز = "تنزيل" class = " fa-3x "]

على سبيل المثال ، هذا:

يصبح هذا في الواجهة الأمامية:

تدوير أيقونات رهيبة للخط

يمكنك أيضًا تدوير أيقونات Font Awesome بسهولة لتغيير اتجاهها.

ها هي معدّلات الدوران. يمكنك استخدام أيٍّ منها تمامًا مثل معدِّلات الحجم أعلاه:

• fa-rotate-90 - يدور 90 درجة
• fa-rotate-180 - يدور 180 درجة
• fa-rotate-270 - يدور 270 درجة
• fa-flip -orizontal - لقلب الرمز على طول محوره الأفقي
• fa-flip-vertical - لقلب الرمز على طول محوره الرأسي

أضف الرسوم المتحركة إلى أيقونات Font Awesome

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

• fa-spin - يضيف دورانًا سلسًا
• fa-pulse - يجعل الأيقونة تدور في 8 خطوات مختلفة

من الأفضل إقران هذه الرسوم المتحركة بأيقونات دائرية. إذا كنت تستخدم أيقونات أخرى غريبة الشكل ، فقد يبدو التأثير غريبًا بعض الشيء.

تغيير لون أيقونة Font Awesome

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

لا تقلق ، رغم ذلك - الأمر بسيط للغاية.

كل ما تحتاجه هو هذا الرمز الصغير:

.fa-NAME {
color: COLOR;
}

حيث يكون fa-NAME هو الاسم الفعلي للرمز الخاص بك ويكون COLOR هو اللون الذي تريد تغييره إليه.

للالتزام بأيقونة التنزيل من الأمثلة السابقة ، إليك كيفية تحويلها إلى اللون الأحمر:

يمكنك بسهولة إضافة CSS مخصص من خلال الانتقال إلى Appearance → Customizer → CSS إضافي .

التفاف الأشياء

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

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