كيفية استخدام Font Awesome على موقع WordPress الخاص بك
نشرت: 2019-02-14عند الاختيار بين استخدام رمز متجه أو صورة ثابتة ، فمن الأفضل استخدام المتجه. إنها صغيرة وسريعة التحميل ، ويمكن أن تتناسب مع أي حجم دون فقدان الدقة. Font Awesome عبارة عن مكتبة رائعة من الرموز المتجهة التي يمكنك استخدامها على مواقع الويب الخاصة بك ، ومن المحتمل أن يكون لها أي شكل أو علامة تجارية قد تحتاجها تقريبًا. وأفضل ما في الأمر؟ انه مجانا. في المرتبة الثانية على الإطلاق ، إنه سهل.
اشترك في قناتنا على اليوتيوب
أيقونات WordPress رائعة للخط
يعد استخدام مكتبة Font Awesome على موقع WordPress الخاص بك أمرًا سهلاً نسبيًا. بمجرد اتباع هذه الخطوات البسيطة ، ستتمكن من تقليل وقت تحميل الصفحة وإنشاء بعض التصميمات الواضحة والنقية حقًا باستخدام هذه الرموز كجزء من عملك.
شيء واحد يجب تذكره هو أنه (في معظم الأحيان) سيتم تسليم أيقونات Font Awesome إلى موقعك كخطوط فعلية. ومن هنا جاء اسم Font Awesome. ستتمكن من تصميمها ومعالجتها بكل الطرق التي يمكنك بها عادةً استخدام حرف الخط ، باستخدام CSS عبر @ font-face وعائلة Font Awesome.
لهذا السبب ، لا داعي للقلق بشأن تغيير الحجم أو التباعد بين كل متصفح أو منفذ عرض فردي. إذا كان يبدو رائعًا ، فهذا لأنه كذلك. وإليك كيف تفعل ذلك:
تثبيت Font Awesome
على الرغم من وجود طريقة يدوية لتثبيت Font Awesome واستخدامه ، إلا أن هناك طريقة أفضل لمستخدمي WordPress. أصدر الأشخاص المتميزون في FA إصدارًا إضافيًا رسميًا لـ Font Awesome WordPress ، وهو يعمل بشكل جميل.
بعد تثبيت المكون الإضافي وتنشيطه ، يمكنك الآن الوصول إلى الرمز القصير [[اسم الرمز]] بالإضافة إلى مقتطفات HTML. طالما أنك تحتفظ بقائمة أيقونات FA سهلة الاستخدام حتى تعرف بالضبط الرمز الذي تحتاجه. سترى في صفحة إعدادات المكون الإضافي (الموجودة ضمن الإعدادات - Font Awesome ) كيف يتم إعداد الأشياء افتراضيًا. بشكل عام ، هذه جيدة للاحتفاظ بها واستخدامها. لن يحتاج معظم الناس إلى أي شيء آخر.
ربما يكون خيار الطريقة هو الأكثر أهمية بالنسبة لمعظم الأشخاص. يمكنك التبديل بين خط الويب أو SVG . بينما يمنحك SVG المزيد من القوة والميزات (مثل تحويلات الطاقة وإخفاءها) ، فإن Font Awesome CDN سيقدم الرموز كملفات SVG وليس كخط. في حين أن هذا أفضل من بعض النواحي ، فإن SVG لا يتعرف عليه العديد من المتصفحات ، ولا يعمل WordPress دائمًا بشكل جيد مع صور SVG. لذلك نقترح تشغيلها بأمان باستخدام إصدار خط الويب.
وكذلك الأمر بالنسبة إلى Font Awesome: إذا لم تكن متأكدًا من الاختلاف ، أو لا تعرف سبب حاجتك إلى استخدام SVG ، فمن المحتمل أن يكون الالتزام بطريقة خط الويب الافتراضية أسهل.
لاستخدام أيقونات Font Awesome على موقع WordPress الخاص بك ، الأمر بسيط. ما عليك سوى إضافة <i class = ”fab fa-wordpress”> </i> في أي مكان تريد ظهور رمز فيه. تأكد من التحقق من مكتبة الرموز لمعرفة الاسم الذي يجب إدخاله.
ملاحظة: الرموز القصيرة في البرنامج المساعد هي ضرب وفشل. يتم عرض بعض الرموز بشكل جيد ، بينما يظهر البعض الآخر فارغًا. نوصيك بالالتزام بإدخال HTML إلا إذا رأيت أن الرمز القصير يعمل من أجلك. انظر أدناه للحصول على مثال لمثال WordPress أعلاه الذي لا يظهر ، بينما رمز الكاميرا يفعل ذلك.
وانت انتهيت. يعد المكون الإضافي Font Awesome WordPress رائعًا للأشخاص الذين لا يشعرون بالراحة عند الدخول إلى موضوعهم أو ملفاتهم لإدراج الكود المطلوب بخلاف ذلك. ومع ذلك ، إذا كنت مرتاحًا لفعل ذلك ، فيمكنك اتباع هذه الإرشادات للحصول على رموز Font Awesome على موقعك.
تثبيت أيقونات Font Awesome يدويًا
أول شيء عليك القيام به هو الانتقال إلى موقع Font Awesome على الويب. من هناك ، انقر فوق الزر " ابدأ باستخدام مجاني" . إنهم يقدمون خططًا مدفوعة للأشخاص الذين لديهم مواقع ذات حركة مرور عالية ويحتاجون إلى حل للمؤسسات ، ولكن يمكن لعامة الناس الابتعاد عن الإصدار المجاني. يمكنك الحصول على 1500 رمز مجانًا ، وأكثر من 5000 متغير على خطة Pro.
الخطوة التالية هي ببساطة نسخ / لصق. لكنك سترغب في التأكد من إبراز خيار خط الويب ، تمامًا كما ناقشنا من قبل.
تحتوي معظم السمات على مكان لإدراج رمز في <head> للموقع تلقائيًا. في حالة Divi ، على سبيل المثال ، ستنتقل إلى Theme Options - Integrations ولصق هذا الرمز في الحقل المسمى Add code to Head of your blog .
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
عندما تضغط على حفظ ، يمكنك البدء في تضمين أي من الرموز التي تريدها ، تمامًا كما فعلنا أعلاه. فقط ، لا يمكنك الوصول إلى الرمز القصير من خلال القيام بذلك.
إذا كان الموضوع الخاص بك لا يدعم تكامل الكود
إذا لم تتمكن من العثور على مكان مثل هذا في المظهر الخاص بك ، فمن السهل أيضًا القيام به يدويًا. سيتعين عليك البحث في الملفات الأساسية لموضوعك للقيام بذلك ، ومع ذلك ، فهي نسخة / لصق سريعة جدًا ، وهي (بشكل عام) آمنة جدًا للقيام بها. انتقل إلى Appearance - Editor في لوحة معلومات WP ، وابحث عن ملف header.php .
ابحث عن السطر الذي تمت كتابة </head> فيه ، وقبله ، تحتاج إلى لصق نفس الرمز من Font Awesome. اضغط على Update File ، وستتمكن من البدء في استخدام أيقونات FA على الفور. مرة أخرى ، لا تحصل على رمز قصير بتثبيت Font Awesome بهذه الطريقة.
أيضًا ، ضع في اعتبارك أنه في أي وقت تقوم فيه بتحرير ملف سمة ، فإنك تريد استخدام سمة فرعية. من خلال القيام بذلك ، فإنك تمنع الكتابة فوق التغييرات التي أجريتها عند تحديث السمة.
المزيد من الخيارات للتثبيت
وإذا كانت لديك احتياجات أخرى أكثر تحديدًا لـ Font Awesome ، فإنها توفر عددًا كبيرًا من الطرق للوصول إلى المكتبة. من تثبيتات NPM و Yarn ، إلى تكامل Sketch و React ، لديهم الكثير من الخيارات إذا كنت في حاجة إليها لأكثر من WordPress.
تصميم أيقونات رهيبة للخط
الآن بعد أن قمت بتثبيتها ، حان الوقت لإبراز الرموز. يمكنك القيام بذلك باستخدام CSS لأن كل رمز تحكمه فئة CSS. الأسلوبان الأكثر استخدامًا هما اللون والحجم. يمكنك إما تضمين نمط CSS في أوراق الأنماط الخاصة بك ، أو يمكنك القيام بذلك بشكل مضمن. بشكل عام ، قد ترغب في استخدام التصميم المضمن لأن الرموز مثل هذه لا تميل إلى أن تكون عامة عبر الموقع بأكمله.
يحتوي موقع Font Awesome على أمثلة لكيفية القيام بذلك. يعرضون التحجيم باستخدام رمز igloo الخاص بهم والفئة الإضافية مثل fa-xs أو fa-xl أو fa-2x لحجم معين.
بالإضافة إلى ذلك ، إذا كنت تريد أن يكون الرمز نسبيًا لحجم معين ولن تعمل القيم المطلقة ، يمكنك وضعه في <div> الخاص به لجعله يعمل ضمن قيودك.
<div style="font-size: 0.5rem;"> <i class="fas fa-igloo fa-10x"></i> </div>
تغليف
وهذا كل شيء! رائع ، أليس كذلك؟ سواء كنت تستخدم المكون الإضافي Font Awesome WordPress أو تقوم بإدخال الشفرة يدويًا ، فلن يستغرق الأمر أكثر من بضع خطوات لتنشيط موقعك وتشغيله. يعتبر Font Awesome رائجًا لسبب ما ، ويأتي بعض ذلك من سهولة استخدامه. لذا اخرج إلى هناك وكن رائعًا!
ما هي طريقتك المفضلة لاستخدام أيقونات Font Awesome؟
المادة مميزة صورة مجاملة من Font Awesome