أيقونات FontAwesome كما يوحي الاسم، رائعة واضافة رائعة لجميع المصممين لتزيين موقع او مدونة بلوجر. يمكنك استخدام هذه الرموز على مدونتك وتطبيقات الويب والتصميمات الرسومية وغير ذلك الكثير. هذه الرموز مفيدة للغاية ولهذا السبب يتم استخدام هذه رموز FontAwesome من قبل العديد من الأشخاص يوما بعد يوم. حتى الآن، يستخدم معظم المدونين المشهورين هذه الرموز على مدوناتهم وتطبيقاتهم. هذه الرموز تزداد شعبية في اليوم التالي. إذن ما هي رموز FontAwesome هذه، وكيف يمكنك استخدامها وماذا ستكون فائدة استخدام هذه الرموز لك هو ما سنشرحه في هذا الشرح التعليمي.
أيقونات FontAwesome هي أيقونات متجهة تعني أن هذه الأيقونات قابلة للتحجيم إلى أي حجم وعرض مثالي بدقة عالية.
يمكن تخصيص هذه الرموز في الحجم والظل واللون وكل شيء يمكن تحقيقه باستخدام نمط خط CSS. كل ما عليك فعله هو إضافة هذه الأنماط إلى ورقة أنماط CSS لقالب مدونتك باستخدام الفئة "i".
هذا هو جمال هذه الرموز التي لا تحتاج إلى رمز JavaScript لتشغيل هذه الرموز على مدونتك. لا مزيد من وقت التحميل ويعمل على جميع الأجهزة بشكل مثالي
هذه الرموز مجانية تمامًا للاستخدام بأي شكل من الأشكال (الاستخدام الشخصي أو التجاري). صفقة جيدة، أليس كذلك؟
هذا هو السؤال والجواب الممتازان رائعان. يتم تحميل هذه الرموز بسرعة 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 . فقط استبدل اسم الرمز باللون الأزرقباختيارك. على سبيل المثال
شاهد صورة بعض الرموز مع تسليط الضوء على أسمائها أدناه. fas الأول يبقى على حاله والثاني يأتي مع اسم الرمز.
<i class = "fas fa-laptop">
لتخصيص اللون والحجم والظل والخلفية، ما عليك سوى استدعاء العلامة (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). في أي وقت إذا حدث أي خطأ، دعنا نساعدك. شكرا لكم.
إرسال تعليق