كيفية إضافة خطوط الأيقونة بسهولة في قالب ووردبريس الخاص بك

هل تريد إضافة خطوط الرموز على موقع ووردبريس الخاص بك؟ سأل أحد قرائنا مؤخرًا ما هي أسهل طريقة لإضافة خطوط الرموز في سمة ووردبريس الخاصة بهم؟

تسمح لك خطوط الرموز بإضافة رموز متجهة (يمكن تغيير حجمها) دون إبطاء موقع الويب الخاص بك. يتم تحميلها مثل خطوط الويب ويمكن تصميمها باستخدام CSS.

في هذه المقالة ، سنوضح لك كيفية إضافة خطوط الرموز بسهولة في قالب ووردبريس الخاص بك ، خطوة بخطوة.

استخدام خطوط الرموز مع أي سمة ووردبريس

ما هي خطوط الرموز ولماذا يجب عليك استخدامها؟

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

معاينة خطوط الرموز

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

هناك العديد من خطوط الرموز المجانية والمفتوحة المصدر والتي تحتوي على مئات الرموز الجميلة.

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

بعض خطوط الرموز الشائعة الأخرى هي:

رائع الخط

جينريكونس

IcoMoon

الخطية

أيقونات المواد من جوجل

مشروع نون

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

في هذا الدليل ، سنغطي ثلاث طرق لإضافة خطوط الرموز في ووردبريس. يمكنك اختيار الحل الذي يناسبك.

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

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

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

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

[اسم الرمز = “صاروخ”]

يمكنك استخدام هذا الرمز القصير مع نص آخر أو بمفرده في قالب قصير مخصص .

إضافة الرمز المختصر لخط الأيقونة في ووردبريس

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

معاينة الرمز

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

تكبير حجم الرمز

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

ستحتاج إلى النقر فوق زر المعاينة في منشورك أو صفحتك لترى كيف سيبدو الحجم الفعلي للرمز.

تم تكبير خط الرمز

يمكنك أيضًا استخدام الرمز القصير للرمز داخل الأعمدة وإنشاء مربعات ميزات مثل هذا:

استخدام خطوط الرموز في مربعات الميزات

2. استخدام خطوط الأيقونة مع أداة إنشاء صفحات ووردبريس

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

بيفر بيلدر

Beaver Builder هو أفضل مكون إضافي منشئ صفحات ووردبريس في السوق. يتيح لك إنشاء تخطيطات صفحة مخصصة بسهولة في ووردبريس دون كتابة أي رمز.

يأتي Beaver Builder مع أيقونات جميلة وجاهز لاستخدام الوحدات النمطية التي يمكنك سحبها وإفلاتها في المنشور والصفحات.

وحدات رمز Beaver Builder

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

تحرير خطوط الرموز في Beaver Builder

يمكنك أيضًا إنشاء سمات ووردبريس مخصصة تمامًا دون كتابة أي رمز باستخدام منتج Themer من Beaver Builder.

إليمينتور برو

Elementor هو مكون إضافي مشهور آخر منشئ صفحات ووردبريس. يأتي أيضًا مع العديد من العناصر التي تسمح لك باستخدام خطوط الرموز ، بما في ذلك عنصر Icon.

رمز العنصر

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

يتمتع منشئو الصفحات المشهورون الآخرون مثل Divi و Visual Composer بدعم كامل لخطوط الرموز.

3. إضافة خطوط Icon في ووردبريس يدويًا باستخدام الكود

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

تتوفر بعض خطوط الرموز مثل Font Awesome من خوادم CDN عبر الويب ويمكن ربطها من قالب ووردبريس الخاص بك مباشرةً.

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

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

طريقة 1:

هذه الطريقة اليدوية سهلة للغاية.

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

احصل على كود تضمين Font Awesome

تحقق الآن من بريدك الوارد بحثًا عن رسالة بريد إلكتروني من Font Awesome باستخدام كود التضمين الخاص بك. انسخ والصق كود التضمين هذا في ملف header.php الخاص بموضوع ووردبريس قبل </head>العلامة مباشرة.

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

<script src="https://use.fontawesome.com/123456abc.js"></script>

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

ومن شأن النهج الأفضل أن يكون ل تحميل جافا سكريبت بشكل سليم في وورد باستخدام المدمج في enqueueing آلية.

بدلا من ربط إلى أنماط من قالب رأس الموضوع الخاص بك، يمكنك إضافة التعليمات البرمجية التالية في موضوع الخاص بك functions.php ملف أو في البرنامج المساعد محددة الموقع .

function wpb_load_fa() {
 
wp_enqueue_script( 'wpb-fa', 'https://use.fontawesome.com/123456abc.js', array(), '1.0.0', true );
 
}
 
add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );

الطريقة الثانية:

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

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

خط رمز التنزيل على جهاز الكمبيوتر الخاص بك

ما عليك سوى تنزيل خطوط الرموز وفك ضغط الحزمة.

الآن ، ستحتاج إلى الاتصال باستضافة ووردبريس الخاصة بك باستخدام عميل FTP والانتقال إلى دليل قالب ووردبريس الخاص بك.

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

تحميل خطوط الرموز إلى قالب ووردبريس الخاص بك

أنت الآن جاهز لتحميل خطوط الرموز في قالب ووردبريس الخاص بك. ما عليك سوى إضافة هذا الرمز إلى ملف function.php الخاص بالقالب أو في مكون إضافي خاص بالموقع.

function wpb_load_fa() {
 
wp_enqueue_style( 'wpb-fa', get_stylesheet_directory_uri() . '/fonts/css/font-awesome.min.css' );
 
}
 
add_action( 'wp_enqueue_scripts', 'wpb_load_fa' );

لقد نجحت في تحميل Font Awesome في قالب ووردبريس الخاص بك.

الآن يأتي الجزء حيث ستضيف أيقونات فعلية إلى موضوع ووردبريس أو منشوراتك أو صفحاتك.

عرض خطوط الرموز يدويًا في ووردبريس

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

اسم الرمز

انسخ اسم الرمز واستخدمه على هذا النحو في ووردبريس.

<i class="fa-arrow-alt-circle-up"></i> 

يمكنك تصميم هذا الرمز في ورقة أنماط المظهر الخاص بك على النحو التالي:

.fa-arrow-alt-circle-up { 
font-size:50px; 
color:#FF6600; 
}

يمكنك أيضًا دمج أيقونات مختلفة معًا وتصميمها مرة واحدة. على سبيل المثال ، لنفترض أنك تريد عرض قائمة من الروابط مع الرموز بجانبها. يمكنك لفها تحت عنصر <div> بفئة معينة.

<div class="icons-group">
  <a class="icons-group-item" href="#"><i class="fa fa-home fa-fw"></i>Home</a>
  <a class="icons-group-item" href="#"><i class="fa fa-book fa-fw"></i>Library</a>
  <a class="icons-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>Applications</a>
  <a class="icons-group-item" href="#"><i class="fa fa-cog fa-fw"></i>Settings</a>
</div>

يمكنك الآن تصميمها في ورقة أنماط السمة الخاصة بك على النحو التالي:

.icons-group-item i { 
color: #333; 
font-size: 50px; 
} 
.icons-group-item i:hover { 
color: #FF6600
} 

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

خدمات مميزة لآجلك

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

اشترك معنا لمزيد من المعرفة

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