لايوجد قالب لموقع ولا مدونة على بلوجر في الوقت الحالي لا يستخدم أيقونات Font Awesome في تكويده، حيث انها تضفي مظهرا أنيقا وحديثا للمواقع والمدونات، ولمن لا يعرف فمكتبة أيقونات Font Awesome هي مكتبه تضم عدد من الأيقونات التي من الممكن أن يتم إضافتها إلى صفحات الموقع من خلال أكواد ووسوم معينه, وبدون الإضطرار إلى تحميل الأيقونات بصيغ png ولا gif، وفي هذا المقال من موقعنا مقال تك سأشرح طريقة تركيب وإستخدام أيقونات Font Awesome للمواقع والمدونات بسهوله وتحسين أكواد المكتبة حتى لا تؤثر على سرعة المدونة.
إقرأ أيضا: كيفية إنشاء مدونة بلوجر إحترافية مجاناَ وشرح لوحة كتابة التدوينات بالتفصيل
هذه هي جميع إصدارات مكتبة أيقونات Font Awesome مرتبه من الأحدث إلى الأقدم وأحدث نسخه في الأعلى وأقدم إصدار في الأسفل إختر الإصدار الذي تفضله وهي جميعها مجانيه، وبعدذلك قم بتضمين الرابط في هذا الكود
حيث يتم إستبدال كلمة الرابط برابط الإصدار الذي قمت بنسخه، ويتم وضع كود المكتبه
قبل الوسم </body> (نوصي بذلك حتى لا يؤثر الكود على سرعة المدونة)
أو تحت الوسم <head>
ولتحسين الكود بشكل أفضل إقرأ: رفع سرعة مدونة بلوجر من خلال تحسين ملفات CSS
تابع الجزء التالي من الشرحإقرأ أيضا: كيفية إنشاء مدونة بلوجر إحترافية مجاناَ وشرح لوحة كتابة التدوينات بالتفصيل
مميزات مكتبة أيقونات Font Awesome
- تضم أشهر الأيقونات التي يحتاج إليها أصحاب المواقع والمدونات
- مجانية تماما
- لا تظطر إلى تحميل صور الأيقونات
- خفيفه ولا تؤثر على سرعة القالب
- سهلة التركيب والإستخدام
- يمكنك وضع رابط على الأيقونات
- يمكنك إختيار الحجم الذي تفضله لكل أيقونه
- يسمح بتحريك الايقونات بسهوله
- يمكنك وضع إطار لها
طريقة تركيب مكتبة أيقونات Font Awesome للمواقع والمدونات
قبل الوسم </body> (نوصي بذلك حتى لا يؤثر الكود على سرعة المدونة)
أو تحت الوسم <head>
ولتحسين الكود بشكل أفضل إقرأ: رفع سرعة مدونة بلوجر من خلال تحسين ملفات CSS
طريقة إستخدام أيقونات Font Awesome للمواقع والمدونات
أولا يجب أن تحصل على الوسم الخاص بالأيقونه التي ترغب بها إذهب إلى:
مكتبة أيقونات Font Awesome
أو
محرك بحث الأيقونات
ثم إختار الأيقونه وستجد إسمها تحتها كما بالصورة قم بنسخه
بعد إختيار إسم الأيقونه إتبع الخطوات التالية لتخصيصها ووضعها في مدونتك:
كود عرض الأيقونه مع العلم أن bell هو إسم الأيقونه التي قمت بإختيارها وستكون النتيجه هكذا
كود عرض الأيقونه مع رابط ينبغي تغيير maqaltek.blogspot.com فتصبح النتيجه هكذا
كود عرض الأيقونه بحجم معين لمعلومات أكثر إدخل Sizing Icons
كود عرض الايقونه مع تأثير الدوران فتصبح النتيجه هكذا
كود عرض الايقونات في شكل قائمه رأسية فتصبح النتيجه هكذا:
السطرين الأول والأخير يخصان توسيط قائمة الأيقونات غير center إلى right لجعلها في اليمين أو left لجعلها في اليسار
كود تغيير إتجاه الأيقونات لتصبح النتيجه هكذا
كود وضع إطار للايقونه لتصبح هكذا
مكتبة أيقونات Font Awesome
أو
محرك بحث الأيقونات
ثم إختار الأيقونه وستجد إسمها تحتها كما بالصورة قم بنسخه
بعد إختيار إسم الأيقونه إتبع الخطوات التالية لتخصيصها ووضعها في مدونتك:
كود عرض الأيقونه مع العلم أن bell هو إسم الأيقونه التي قمت بإختيارها وستكون النتيجه هكذا
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
كود تغيير إتجاه الأيقونات لتصبح النتيجه هكذا
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-vertical
fa-flip-horizontal
بعد تخصيص الايقونات من خلال أكواد توضع إما داخل قالب المدونه أو في المواضيع من خلال تبديل وضع الإدخال من تأليف إلى HTML ووضع كود الايقونه ثم نشر الموضوع، وبهذا أصبحت لديك معلومات كافيه عن تركيب وإستخدام أيقونات Font Awesome للمواقع والمدونات.
إقرأ أيضا: شرح تركيب زر الصعود لأعلى إلى مدونات بلوجر
إقرأ أيضا: شرح تركيب زر الصعود لأعلى إلى مدونات بلوجر