كيفية استخدام واضافة أيقونات FontAwesome الى قالب بلوجر

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

أيقونات FontAwesome في Blogger

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


1. ما هي رموز FontAwesome هذه؟

أيقونات FontAwesome هي أيقونات متجهة تعني أن هذه الأيقونات قابلة للتحجيم إلى أي حجم وعرض مثالي بدقة عالية.

2. هل يمكننا تخصيص هذه الرموز في قالبنا؟

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

3. هل يلزم وجود JavaScript لتشغيل هذه الرموز على مدونتي؟

هذا هو جمال هذه الرموز التي لا تحتاج إلى رمز JavaScript لتشغيل هذه الرموز على مدونتك. لا مزيد من وقت التحميل ويعمل على جميع الأجهزة بشكل مثالي

4. هل هذه الرموز مجانية أو متميزة؟

هذه الرموز مجانية تمامًا للاستخدام بأي شكل من الأشكال (الاستخدام الشخصي أو التجاري). صفقة جيدة، أليس كذلك؟

5. لماذا يجب علي استخدام هذه الرموز؟ لماذا لا PNG أو صور أخرى؟

هذا هو السؤال والجواب الممتازان رائعان. يتم تحميل هذه الرموز بسرعة 10 أضعاف سرعة PNG أو ملفات الصور الأخرى وتقليل عدد طلبات HTTP لتحميل الصور على مدونتك. يتم تحميل هذه الرموز كنص / خطوط أخرى لمدونتك. في نهاية المطاف، تعزز سرعة تحميل مدونتك، وتكتسب المزيد من الزوار، وتعطي مظهرًا رائعًا لمدونتك وتساعدك في تحسين محركات البحث للمدونة بطريقة أو بأخرى.

كيفية استخدام هذه الرموز على مدونتي؟

لاستخدام هذه الرموز في مدونتك، تحتاج إلى تعديل النموذج قليلا.

  • انتقل إلى مدونة بلوجر ← القالب (من الأفضل اخد نسخة احتياطية للقالب)  تحرير القالب
  • قم بالدخول لتعديل قالب بلوجر.
  • الآن اضغط على Ctrl + f ثم ابحث عن علامة <head>
  • بعدلعلامة <head> هذه، قم بلصق الكود الوارد أدناه.



 فوق الرمز هو ورقة أنماط CSS لرموز FontAawesome. يمكنك الآن وضع أي رمز للظهور في أي مكان مع علامة <i> بسيطة في HTML، على سبيل المثال داخل <div> أو <a> أو <li> أو <p>. انظر المثال أدناه كيف استخدمنا الرموز في روابط قائمة التنقل الخاصة بنا.

<li><a href="https://www.techsoune.com/"><i class="fas fa-home"></i>Home</a></li><li><a href="/p/contact-us.html"><i class="fas fa-envelope"></i>Contact Us</a></li>

لتغيير / استخدام رمز آخر، ما عليك سوى استبدال اسم الرمز باللون الأصفر <i class = 'fas fa-home'> واسم الرمز مذكور فوق كل رمز هنا في صفحة الايقونات FontAwesome . فقط استبدل اسم الرمز باللون الأزرقباختيارك. على سبيل المثال

<i class = "fas fa-laptop">

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

اضافة أيقونات FontAwesome

تخصيص الرموز باستخدام CSS

لتخصيص اللون والحجم والظل والخلفية، ما عليك سوى استدعاء العلامة (i) في CSS ورسم هذه الرموز بإبداعك. يتم توفير رمز CSS أدناه لنسخ ولصق وتخصيص ببساطة. انسخ الكود أعلاه والصقه قبل سطر الكود ]]></b:skin> مباشرة.

i {
color:#E2FD18;
font-size:15px;
padding-right:5px;
text-shadow: 1px 1px 1px #000;
}
سيتم تطبيق تأثير CSS أعلاه على كل رمز في مدونتك. ولكن ماذا لو كنت تريد إعطاء لون مختلف، وحجم، وظل، وما إلى ذلك، إلى رمز معين؟ لا تقلق، هل تعلم ماذا؟ هذه أيقونات رائعة لذا ها هو الاختراق الآخر بالنسبة لك. إذا كنت ترغب في إعطاء تأثير منفصل لرمز عن تأثير رمز آخر، فأنت بحاجة إلى تطبيق النمط داخل علامة <HTML <i. هنا مثال:

<i class='fas fa-heart' style='font-size:18px; color:red;'/>

 بعد تطبيق النمط أعلاه داخل علامة HTML <i>، سيكون حجم الرمز الخاص بك 18 بكسل واللون الأحمر بينما يظل الآخر كما هو وفقًا للتأثير الذي طبقته CSS على العلامة (i). في أي وقت إذا حدث أي خطأ، دعنا نساعدك. شكرا لكم.
تعليقات



حجم الخط
+
16
-
تباعد السطور
+
2
-