إضافة FontAwesome إلى ووردبريس بطريقتين سهلتين

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

يمكن استخدام كود محتوى CSS لإنشاء رموز خطوط رائعة باتباع الخطوات أدناه. يجب أن يكون لعنصر الرمز الذي تريد استخدامه اسم فئة CSS فريد. عيّن خاصية وزن الخط إلى 900 (للصلب) أو 400 (للعادية أو للعلامات التجارية) ، 300 (للأيقونات الاحترافية) أو 400 (للصلب أو العلامات التجارية). تأكد من تعيين خاصية رمز الخط الرائع على قيمة unicode.

كيف أقوم بتثبيت Font Awesome في WordPress؟

هناك عدة طرق مختلفة يمكنك من خلالها تثبيت Font Awesome في WordPress. إحدى الطرق هي استخدام مكون إضافي مثل WP Add Custom CSS أو Simple Custom CSS. ستسمح لك هذه المكونات الإضافية بإضافة Font Awesome CSS إلى موقع WordPress الخاص بك. هناك طريقة أخرى لتثبيت Font Awesome وهي إضافة CSS يدويًا إلى قالب WordPress الخاص بك. يمكنك القيام بذلك عن طريق إضافة الكود التالي إلى ملف CSS الخاص بقالبك:import url ('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css')؛ بمجرد إضافة CSS ، ستحتاج إلى إدراجه في قالب WordPress الخاص بك. يمكنك القيام بذلك عن طريق إضافة الكود التالي إلى ملف function.php الخاص بالقالب الخاص بك: function wp_enqueue_fa () {wp_enqueue_style ('font-awesome'، 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css /font-awesome.min.css ') ؛ } add_action ('wp_enqueue_scripts'، 'wp_enqueue_fa') ؛ يمكنك أيضًا استخدام CDN لتحميل Font Awesome. للقيام بذلك ، يمكنك إضافة الكود التالي إلى قالب WordPress الخاص بك: بمجرد إضافة CSS ، ستحتاج إلى إدراجه في قائمة WordPress الخاصة بك. يمكنك القيام بذلك عن طريق إضافة الكود التالي إلى ملف function.php الخاص بالقالب الخاص بك: function wp_enqueue_fa () {wp_enqueue_style ('font-awesome'، 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css /font-awesome.min.css ') ؛ } add_action ('wp_enqueue_scripts'، 'wp_enqueue_fa') ؛

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

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

كما ترى ، لقد أضفت السطر التالي إلى رأسك. rel = styleheet ؛ rel = رابط إلى ورقة الأنماط ؛ rel = رابط إلى موقع الويب ؛ rel = رابط إلى صفحة الويب ؛ هل يوجد ملف Fontawesome؟ بعد إضافة هذا السطر ، سيتم تحميل Font Awesome بمجرد الانتهاء من تحميل صفحتك. من خلال تحديد السطر التالي ، يمكنك تطبيق نمط Font Awesome على أي عنصر على موقع الويب الخاص بك. النمط: العنصر هو مزيج من الحرف. هذه هي عائلة الخطوط المعروفة باسم "Font Awesome". إذا لم يتم تعيين نمط Font Awesome لعنصر ، فاستخدم الكود التالي: لحل هذه المشكلة ، استخدم الكود التالي. * style * A.element هو عنصر ليس له قيمة. تتضمن عائلة الخطوط Fontawesome و fontmanager. # ستتعرض جميع العناصر ، سواء كانت تحتوي على "عنصر" كفئة خاصة بها ، لنمط Font Awesome بمجرد إضافة هذا السطر.

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

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

هذه هي الطريقة الرسمية لاستخدام أيقونات Font Awesome Free أو Pro على موقعك. استخدم محرر الكتلة أو المحرر الكلاسيكي لإضافة رموز إلى منشوراتك وصفحاتك. من أجل استخدام Icon Chooser ، ستحتاج إلى شراء Pro Kit. يمكن لـ CDN البحث عن أيقونات مجانية وإضافتها فقط وليس أيقونات Pro ؛ لإضافة رموز Pro ، استخدم الرموز القصيرة أو HTML. في معظم الحالات ، يقدم المكون الإضافي Font Awesome رموزًا مستندة إلى الويب باستخدام Font Awesome CDN. يمكنك تغيير إعدادات CDN في المكون الإضافي بمجرد فتحه. إذا كنت تريد الرموز المجانية الأساسية فقط ، فمن المحتمل ألا تواجه أي مشكلة في تكوينها في التكوين الافتراضي.

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

يمكنك الآن تنزيل الإصدار 4.0.0-rc21 من موقع Font Awesome الإلكتروني . لتجنب الحظر غير الضروري لطلبات الشبكة إلى خادم واجهة برمجة التطبيقات ، تم إهمال أساليب واجهة برمجة التطبيقات (). يمكن أن يتسبب استخدام .svg والعناصر الزائفة في أن يعاني المستخدم من بطء الأداء ، لذا اجعل هذه الإشعارات مرئية في واجهة مستخدم المسؤول. من المستحيل تشغيل vg على الإصدار 4 من نظام التشغيل.

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

لاستخدام أيقونات Font Awesome على موقع WordPress الخاص بك ، ما عليك سوى اتباع هذه الخطوات البسيطة. كل ما عليك فعله هو تضمين i class = fab fa-wordpress٪ 27 / i> في أي مكان تريد أن يظهر فيه الرمز الخاص بك. يرجى التحقق مرة أخرى من مكتبة الرموز لمعرفة الاسم الذي يجب أن يكون. الغرض من الرموز المختصرة للمكوِّن الإضافي هو استخدامها بعدة طرق.

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

حجم خط تطبيق Android هو 75 × 75 × 75 ؛ لونه 45f338 ؛ وزن الخط هو 120000 ؛ خط ارتفاعه 640 ؛ الهامش السفلي 1.5em؛ وتبلغ مساحة الحشو 0.25 ميكرومتر. في الوقت الحالي ، يجب أن يكون الهدف هو عمل مسودة تقريبية لهذا. في هذه المرحلة ، يمكنك تخصيص الرسم بعدة طرق ، بما في ذلك تنفيذ CSS. وفقًا لقسم البداية في مستند WordPress ، فإن أي فئة تحمل الاسم "icon" يجب أن تستخدم الكود الموجود بين قوسين. تُستخدم خاصية حجم الخط لتحديد حجم الرمز بالبكسل. لون الكود الست عشري هو ظل أخضر. الكود الموضح هنا هو مجرد مثال ، ويمكنك تغييره إلى أي لون تريده. يمكنك استخدام الرموز لتسليط الضوء على الروابط التي تهم الزوار أو إضافة المزيد من التوهج إلى ميزات محددة.

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

كيفية استخدام خطوط الأيقونة في ووردبريس

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

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

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

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

بدون مكون إضافي ، يمكنك تثبيت Font Awesome Kit في WordPress. ما عليك سوى تحديد موقع ملف jobs.html الخاص بالقالب وإضافة مقتطف الشفرة. أوصي بنسخ ملفاتك احتياطيًا ، خاصة إذا كنت مبتدئًا ، من أجل سلامتك. إذا لم يكن لديك سمة فرعية ، فيمكنك استخدام Code Snippets ، وهو مكون إضافي. من أجل الوصول إلى قائمتك ، يجب أن يكون لديك حساب Font Awesome. بدلاً من ذلك ، سنتعرف على كيفية إضافة الرموز يدويًا إلى قائمة WordPress. إذا كنت تريد نسخ فصل دراسي من علامة> i> بعد تحديد رمز Font Awesome ، فافعل ذلك.

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

بالإضافة إلى ذلك ، يمكنك استخدام قائمة WordPress لتغيير حجم الرموز الخاصة بك بفئات إضافية. يمكن تضمين خط في الملف. هذا هو بالضبط ما يجب أن تبدو عليه قائمة WordPress الخاصة بك بدون مكون إضافي. لجعل الأشياء أكثر سهولة في الاستخدام ، قد تحتاج إلى تعديل بعض رموز CSS المخصصة لحل بعض مشكلات التصميم. توفر لك ReadyShip استضافة AWS مُدارة عالية الجودة مع خدمات SSL و CDN مجانية ، بالإضافة إلى مواقع ومدونات WordPress الجاهزة.

أضف أيقونات إلى قائمة ووردبريس الخاصة بك

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