كيفية إضافة رموز SVG رائعة الخط إلى سمة WordPress الخاصة بك

إذا كنت تبحث عن إضافة بعض الإثارة إلى قالب WordPress الخاص بك ، فإن إضافة أيقونات Font Awesome SVG هي طريقة رائعة للقيام بذلك. وهو ليس بالصعوبة التي قد تتصورها. في هذه المقالة ، سنوضح لك كيفية إضافة أيقونات Font Awesome SVG إلى قالب WordPress الخاص بك. أولاً ، ستحتاج إلى العثور على أيقونات Font Awesome SVG التي تريد استخدامها. يمكنك العثور على مجموعة كبيرة من الرموز على موقع Font Awesome. بمجرد العثور على الرموز التي تريد استخدامها ، قم بتنزيلها على جهاز الكمبيوتر الخاص بك. بعد ذلك ، ستحتاج إلى تحميل أيقونات Font Awesome SVG إلى قالب WordPress الخاص بك. يمكنك القيام بذلك عن طريق الانتقال إلى علامة التبويب "المظهر" في لوحة معلومات WordPress الخاصة بك واختيار "المحرر". من هناك ، حدد موقع ملف "وظائف النسق" (يسمى عادةً "function.php") وقم بتحميل أيقونات Font Awesome SVG إلى هذا الملف. أخيرًا ، ستحتاج إلى إضافة بضعة أسطر من التعليمات البرمجية إلى سمة WordPress الخاصة بك لعرض أيقونات Font Awesome SVG بالفعل. حدد موقع ملف "header.php" وأضف سطور التعليمات البرمجية التالية إليه: بمجرد إضافة سطور التعليمات البرمجية هذه ، احفظ تغييراتك وقم بتحميل ملف "header.php" إلى قالب WordPress الخاص بك. هذا هو! يجب أن تشاهد الآن أيقونات Font Awesome SVG تظهر في قالب WordPress الخاص بك.

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

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

كيف أقوم بإضافة رموز رائعة لخطوط مخصصة إلى WordPress؟

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

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

بعد ذلك ، يجب عليك إدخال هذا الرمز في ملف function.php لموضوع طفلك (يرجى ملاحظة أنني أتمنى أن يكون هذا موضوعًا فرعيًا). يجب أن تترك أيقوناتك أصغر قليلاً في معظم الأوقات. لتكبير الرمز الخاص بك ، ما عليك سوى إضافة فئة بسيطة إلى فئة الرموز. تحقق من صفحة أمثلة Font Awesome للحصول على قائمة كاملة بجميع عمليات التلاعب التي يمكنك إجراؤها. يمكنك أيضًا إضافة رموز Font Awesome إلى عناصر قائمة WordPress الفعلية باستخدام البرنامج الإضافي Font Awesome 4 Menus. باستخدام نفس خيارات التصميم مثل الخيارات الأخرى ، يمكنك بسهولة زيادة أحجام الرموز أو أفضل. في هذا المثال ، قد تحتاج إلى تضمين هذه الفئة في الرمز القصير: لزيادة حجم الرمز.

كيف يمكنني إضافة رموز مخصصة إلى سمة WordPress الخاصة بي؟

انتقل إلى Admin Dashboard وحدد خيار الوسائط على الجانب الأيسر من القائمة. بمجرد اختيارك لهم جميعًا ، انقر فوق تحميل. بعد التحميل ، انسخ والصق عناوين URL الخاصة بكل رمز في ملف Notepad حتى تعرف ماهيتها ويمكن أن تتذكر عنوان URL الخاص بها.

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

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

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

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

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

تحظى أيقونات Font Awesome بشعبية كبيرة لأنها سهلة الاستخدام وتوفر مجموعة متنوعة من الرموز للاختيار من بينها. بالإضافة إلى أنها تبدو رائعة!

أكواد محتوى CSS المستخدمة بواسطة Font awesome لإضافة الرموز إلى الصفحة هي :: قبل العنصر الزائف. لاستخدام رموز رائعة للخط في كود محتوى CSS ، اتبع الخطوات أدناه. تحدد خصائص CSS المخصصة التالية خصائص عائلة الخطوط وخصائص وزن الخط للأيقونة. نحن مضطرون لاستخدام عائلة الخطوط لأن الأيقونة غير معروضة. عند إدخال الرمز أعلاه ، سترى الرموز كما هو موضح في النمط الافتراضي. إذا كنت ترغب في إضافة بعض الأنماط المخصصة إلى الرمز ، فيمكنك القيام بذلك عن طريق إضافة فئة مشتركة إليها. بشكل عام ، يتم عرض رموز الخطوط الرائعة باستخدام أسماء فئات css وفئات نمط الرموز. من الصعب تغيير جميع أسماء فئات أيقونات المشروع. في هذه الحالة ، تعرض فئة Fontawesome CSS رموزًا باستخدام أكواد محتوى CSS بدلاً من العناصر الزائفة.

خط رائع وورد

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

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

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

إعدادات البرنامج المساعد Font Awesome

مجموعة أيقونات Font Awesome هي مجموعة أيقونات شائعة يمكن استخدامها في مجموعة متنوعة من مواقع الويب والتطبيقات. لدينا مكون إضافي يسمح لك باستخدام Font Awesome بالطريقة التي تراها مناسبة مع WordPress. لاستخدام المكون الإضافي ، انتقل إلى قائمة الإعدادات وحدد Font Awesome Plugin Settings (إعدادات البرنامج المساعد Font Awesome) ، حيث يمكنك تغيير إعدادات CDN للسماح باستخدام رموز Font Awesome Free كخطوط ويب. لا تحتاج إلى تعديل التكوين الافتراضي إذا كنت تريد الرموز المجانية الأساسية فقط.

لا تظهر أيقونات رائعة لخطوط ووردبريس

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

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

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

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

إضافة الرموز إلى موقع الويب الخاص بك

إذا كنت تستخدم إصدارًا مجانيًا من Font Awesome ، فستحتاج إلى استخدام رموز بديلة. باستخدام منتقي الأيقونات في نسخة مدفوعة من Font Awesome ، يمكنك إضافة أيقونات إلى موقع الويب الخاص بك. عندما تكون في كتلة نصية لـ Gutenberg (أو أعلى شريط التنسيق في محرر WordPress Classic) ، سينقلك إلى خيار قائمة Font Awesome Icon في شريط التنسيق الممتد. باستخدام منتقي الرموز ، يمكنك البحث عن أيقونات Font Awesome حسب اسم الرمز أو الفئة أو الكلمة الأساسية. لوضع رمز على موقع الويب الخاص بك ، ستحتاج أولاً إلى استخدام CSS Prefix fa واسم الرمز. إذا كنت تريد استخدام الرمز في فئة رمز Font Awesome ، فاستخدم الكود التالي: * br. ونتيجة لذلك ، يتوفر Font Awesome بالتنسيقات التالية: br. يمكن أيضًا تغيير حجم خط الحاوية باستخدام بادئة fa. إذا تغير حجم حاوية خط الرمز ، فسيصبح أكبر. إذا كان لديك إصدار مدفوع من Font Awesome ، فيمكنك استخدام Icon Chooser لإضافة رموز إلى موقع الويب الخاص بك.