طريقة اضافة ايقونات بجانب اقسام بلوجر او اي موقع اخر 2026

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

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

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

ما فائدة إضافة أيقونات بجانب أقسام المدونة؟

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

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

ما هي Font Awesome؟

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

في الإصدارات الحديثة يتم استخدام أصناف مثل fa-solid للأيقونات العادية و fa-brands لأيقونات العلامات التجارية.

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

طريقة إضافة Font Awesome إلى مدونة بلوجر

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

1. الدخول إلى لوحة تحكم Blogger.
2. اختيار المدونة.
3. الدخول إلى قسم المظهر.
4. اختيار تعديل HTML.
5. وضع كود Font Awesome داخل وسم <head>.
6. حفظ التغييرات.

وتوفر Font Awesome حالياً طريقة Kit، حيث يتم وضع كود JavaScript الخاص بالـ Kit داخل قسم head في الصفحة.

<script src="https://kit.fontawesome.com/YOUR_KIT_CODE.js" crossorigin="anonymous"></script>

استبدل YOUR_KIT_CODE بالكود الخاص بك من حساب Font Awesome.

طريقة كتابة أيقونة داخل HTML

بعد إعداد Font Awesome، يمكنك استدعاء الأيقونة باستخدام وسم <i> مع اسم الأيقونة والصنف المناسب.

<i class="fa-solid fa-user"></i>

ويمكن أيضاً استخدام وسم <span> بدلاً من <i>.

<span class="fa-solid fa-user"></span>

مثال على إضافة أيقونة بجانب عنوان قسم

إذا كان لديك قسم خاص ببلوجر، يمكنك استخدام أيقونة Blogger بجانب اسم القسم بهذه الطريقة:

<a href="رابط-قسم-بلوجر"> <i class="fa-brands fa-blogger"></i> إضافات بلوجر </a>

ويمكنك تغيير رابط القسم واسم الأيقونة حسب نوع المحتوى الموجود في المدونة.

أمثلة لأيقونات يمكن استخدامها في أقسام المدونة

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

بلوجر

أندرويد

ويندوز

يوتيوب

الهواتف

البرمجة

كيفية إضافة أيقونة بجانب كل تسمية في Blogger

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

الفكرة الأساسية هي إنشاء قاعدة CSS أو تعديل كود قائمة التسميات بحيث يتم التعرف على اسم التسمية وإظهار الأيقونة المناسبة بجانبها.

على سبيل المثال، يمكن أن تكون لديك قائمة أقسام بالشكل التالي:

<ul class="categories"> <li> <a href="#"> <i class="fa-brands fa-blogger"></i> إضافات بلوجر </a> </li> <li> <a href="#"> <i class="fa-brands fa-android"></i> أندرويد </a> </li> <li> <a href="#"> <i class="fa-brands fa-windows"></i> ويندوز </a> </li> </ul>

تغيير حجم ولون الأيقونة

يمكنك التحكم في حجم الأيقونة ولونها باستخدام CSS. وهذا يسمح لك بتنسيق الأيقونات لتتناسب مع ألوان وتصميم مدونتك.

.category-icon { font-size: 20px; margin-left: 7px; } .category-icon:hover { opacity: 0.8; }

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

<i class="fa-solid fa-folder category-icon"></i>

أين تجد أسماء أيقونات Font Awesome؟

يمكنك البحث عن الأيقونة المناسبة من خلال الموقع الرسمي لـ Font Awesome، ثم نسخ اسم الأيقونة واستخدامه داخل كود HTML.

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

على سبيل المثال، أيقونة YouTube تستخدم:

<i class="fa-brands fa-youtube"></i>

أما الأيقونات العادية فتستخدم الصيغة المناسبة مثل:

<i class="fa-solid fa-folder"></i>

فيديو شرح طريقة إضافة الأيقونات

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

نصائح لتحسين شكل الأقسام

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

الخلاصة

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

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

المصدر الرسمي للأيقونات

يمكنك تصفح مكتبة Font Awesome والبحث عن آلاف الأيقونات واختيار الأيقونة المناسبة لموقعك ومدونتك.

مكتبة Font Awesome الرسمية للأيقونات