لماذا لم يتم إدراج الأيقونة ذات الخط الرائع؟ بداية العمل. المرحلة الأولى: ربط ملف نمط الخط Font Awesome

كود CSS وأمثلة لاستخدام خط الأيقونة هذا "Font Awesome". ترى أدناه رمز CSS نفسه وجدولًا يحتوي على أمثلة للفئات والمحتوى (المحتوى:"") والنتيجة.

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

اتصال الخط:

أضف ملف css للخط المطلوب (حسب الإصدار).
إذا كانت بنية موقعك (التطبيق) تحتوي على بنية ملفات مختلفة (الملفات موجودة في مجلدات مختلفة)، فقم بتغيير جميع المسارات إلى مساراتك (على سبيل المثال: /assets/css/).
إذا كنت لا تفهم ما نتحدث عنه، اذهب. ثم اضغط على اختصارات لوحة المفاتيح Ctrl + U أو انقر بزر الماوس الأيمن على منطقة فارغة من الصفحة > رمز مصدر الصفحة / نص مصدر الصفحة (يجب كتابة شيء مثل هذا في قائمة السياق).
على سبيل المثال، يمكنك توصيل الخط FA مثل هذا:

سيقوم هذا الرمز بتوصيل الحد الأقصى لإصدار الخط بجميع الرموز

قم أيضًا بإسقاط هذا المجلد /css/fonts/ المجلد من الأرشيف _site-89_fontawesome-pro-5.8.2.zip/fontawesome-pro-5.8.2-web.zip/ خطوط الويب
أضف هذا الرمز إلى صفحتك أو ملف CSS حتى تتمكن من استخدام خط FA بسهولة ( ، لكن لا ) ، (عائلة الخط:"Font Awesome 5 Pro"، "Font Awesome 5 Brands"؛ التحدث: لا شيء؛ نمط الخط: عادي؛ وزن الخط: عادي؛ متغير الخط: عادي؛ تحويل النص: لا شيء؛ سطر -الارتفاع: 1؛-تجانس خط webkit: الحواف؛-تجانس الخط moz-osx:تدرج الرمادي)

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

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

سوف يتحول:

تحميل الملف

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

Fa-star-o:before(content:"\f006";) 1986 أيقونات

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

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

ما هي أيقونات Font Awesome وما مدى فائدتها؟

إدراج أيقونات Font Awesome

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

يمكنك العثور على قائمة كاملة من الرموز في موقع الخطوط الرائعة.

على سبيل المثال، إذا كنت تبحث عن أيقونة "تنزيل"، فما عليك سوى إدخال "تنزيل" في البحث والاختيار من الخيارات المتاحة:

بعد تحديد الأيقونة التي تريدها، يمكنك رؤية شاشة بأحجام مختلفة لهذا الأيقونة. في وسط الشاشة، يجب أن تلاحظ كتلة صغيرة من التعليمات البرمجية:

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

يمكنك العودة إلى علامة التبويب المرئية بعد الانتهاء من تضمين الكود. بعد نشر منشور، سترى الرمز الخاص بك في الواجهة الأمامية:

كيفية زيادة حجم أيقونة Font Awesome

كما ترون في المثال أعلاه، فإن الرموز صغيرة جدًا. إذا كنت بحاجة إلى زيادتها، فستحتاج إلى إضافة بضعة أسطر من التعليمات البرمجية. على سبيل المثال، لمضاعفة حجم أيقوناتك، يمكنك إضافة "fa-2x" إلى فئة الأيقونات.

على سبيل المثال، هذا هو الكود الأولي للأيقونة:

وهنا الكود الذي يحتوي على الأيقونة مكبرة مرتين:

في الحياة الواقعية، سيبدو الرمز الآن كما يلي:

فيما يلي قائمة بأجزاء التعليمات البرمجية التي تحتاج إلى إضافتها لتغيير الحجم:

• fa-lg – زيادة بنسبة 33%
• fa-2x – زيادة 2 مرات
• fa-3x - زيادة 3 مرات
• فا-4x –…
• fa-5x –... حسنًا، لقد فهمت الفكرة!

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

2. كيفية إضافة Font Awesome إلى WordPress باستخدام مكون إضافي

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

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

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

للبدء، قم بتثبيت وتفعيل البرنامج المساعد.

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

إضافة الرموز

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

تنسيق الرمز القصير الذي تحتاجه هو:

حيث NAME هو اسم الرمز الموجود على موقع Font Awesome:

يمكنك إضافة هذا الرمز القصير إلى وحدة Divi أو إلى محرر نصوص WordPress العادي. فيما يلي مثال حيث أضفنا رمزًا عبر الرمز القصير إلى وحدة نصية أثناء استخدام Divi Visual Builder:

يعرض Visual Builder مثل هذا:

يمكنك استخدام نفس الرمز القصير في محرر WordPress العادي.

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

نتائج

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

ولكن إذا كنت لا ترغب في لمس رمز الموضوع، فمن الأفضل استخدام البرنامج المساعد Better Font Awesome.

الآن أنت! هل تستخدم الخط Awesome؟

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

ما هو Font Awesome وما مميزاته؟

خط الأيقونة Font Awesome هو خط تم إنشاؤه باستخدام الرموز، ولكنه ليس بأي حال من الأحوال مجموعة من الصور. لماذا هذا التمييز مهم جدا؟ لأن الخط رائع:

• يعني Vector أنه يبدو رائعًا بغض النظر عن الحجم الذي يتم عرضه به.
• قابل للتخصيص - يمكنك التعامل معه مثل أي خط آخر. تغيير الألوان وإضافة الرسوم المتحركة والمزيد!
• التوافق عبر المتصفحات – يجب أن يعمل خط الرمز في أي متصفح تقريبًا.

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

كيفية إضافة Font Awesome إلى WordPress يدويًا (بدون مكون إضافي)

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

المرحلة 1: ربط ملف نمط الخط Font Awesome

الخطوة الأولى هي إضافة أنماط Font Awesome CSS إلى قالب header.php الخاص بالقالب النشط. أضف الكود الخاص بتوصيل ملف نمط CSS إلى القسم :

سيتضمن هذا الرمز ملف ورقة أنماط Font Awesome من مستودع Bootstrap عبر CDN. يمكنك أيضًا تنزيل ملف الأنماط مباشرةً من موقع Font Awesome الرسمي (https://fontawesome.com/) وإدراجه من القالب الخاص بك.

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

وظيفة Load_font_awesome() ( wp_enqueue_style("font-awesome-style", "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); ) add_action(" wp_enqueue_scripts"، "load_font_awesome");

استخدام أيقونات Font Awesome

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

للعثور على قائمة كاملة بالأيقونات، انتقل إلى موقع Font Awesome الرسمي في قسم القائمة أيقوناتواختر الأيقونة المطلوبة. على سبيل المثال، إذا كنت تريد إضافة أيقونة إبداء الإعجاب، فابحث عن أيقونة إبداء الإعجاب (https://fontawesome.com/icons/thumbs-up?style=regular).

كل أيقونة لها صفحتها الخاصة حيث يمكنك رؤية المظهر التقريبي للأيقونة بأحجام مختلفة، ومعرفة كود Unicode، كما يمكنك تنزيل الأيقونة بصيغة SVG. الأكثر أهمية بالنسبة لنا في الوقت الحالي هو رمز المثال لإدراج رمز. على سبيل المثال، بالنسبة لرمز الإبهام، سيكون رمز المثال كما يلي:

مهم!يرجى ملاحظة أننا في مثالنا نستخدم إصدار الخط 4.7.0. أحدث إصدار حاليًا هو الإصدار 5.1.0 ويستخدم تنسيق فئة مختلفًا. على سبيل المثال، يتم توصيل الرمز أعلاه بالتنسيق .

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

عند استخدام إصدارات مختلفة من ملف نمط Font Awesome، سيكون بناء جملة تنسيق الفئة مختلفًا:

ملخص موجز

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

اكتب في التعليقات رأيك حول استخدام Font Awesome، وشارك أيضًا انطباعاتك إذا كنت تستخدم الإصدارات 5.x.x من هذا الخط.

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

ل تتم الإشارة إلى فئتين رئيسيتين - fa وfa-icon، حيث يتم كتابة اسم الرمز بدلاً من الرمز. جميع الأسماء موجودة في هذه الصفحة.

أرز. 1. أيقونات لمشغل الفيديو

لإضافة أيقونة اسمها play قم بكتابة الكود التالي:

العنصر نفسه فارغة وإدراجها في المكان على الصفحة حيث يكون الرمز مطلوبًا. حجمه يطابق حجم النص الحالي.

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

مثال 1. حجم الرمز

الحجم الأصلي