كيفية استخدام واضافة أيقونات FontAwesome الى قالب بلوجر
How to use and add FontAwesome icons to bloger template
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاتة
مرحبا بكم متابعين مدونه العنود للمعلومات اليوم سوف اقدم لكم موضوع كيفية استخدام واضافة أيقونات FontAwesome الى قالب بلوجر.
المحتوى المقال:
- تعريف ايقونات خطوط font-awesome ؟
- كيفية استخدام واضافة أيقونات FontAwesome الى قالب بلوجر؟
- كيفية استخدام هذه الرموز على مدونتي؟
- تخصيص الرموز باستخدام CSS؟
- ماهي مميزات مكتبة Font Awesome ؟
- اهميةاضافة ايقونات التواصل الاجتماعي لـ بلوجر؟
تعريف ايقونات خطوط font-awesome ؟
ايقونات الخطوط هي عبارة عن خطوط يتم تركيبها على المدونات او المواقع لكنها بدل ان تحتوي على خطوط بل تحتوي على ايقونات و ميزة هذه الخطوط انها تغنيك عن البحث عن ايقونات لمدونتك كما انها تسرع ظهور موقعك وهي عالية الجودة طبعا كما تمكنك تحريك هذه الإيقونات واضافة تاثيرات رائعة عليها بكل يسر وسهولة .
كيفية استخدام واضافة أيقونات FontAwesome الى قالب بلوجر؟
أيقونات FontAwesome كما يوحي الاسم، رائعة واضافة رائعة لجميع المصممين لتزيين موقع او مدونة بلوجر. يمكنك استخدام هذه الرموز على مدونتك وتطبيقات الويب والتصميمات الرسومية وغير ذلك الكثير. هذه الرموز مفيدة للغاية ولهذا السبب يتم استخدام هذه رموز FontAwesome من قبل العديد من الأشخاص يوما بعد يوم. حتى الآن، يستخدم معظم المدونين المشهورين هذه الرموز على مدوناتهم وتطبيقاتهم. هذه الرموز تزداد شعبية في اليوم التالي. إذن ما هي رموز FontAwesome هذه، وكيف يمكنك استخدامها وماذا ستكون فائدة استخدام هذه الرموز لك هو ما سنشرحه في هذا الشرح التعليمي.
كيفية استخدام هذه الرموز على مدونتي؟
لاستخدام هذه الرموز في مدونتك، تحتاج إلى تعديل النموذج قليلا.
1/انتقل إلى مدونة بلوجر ← القالب (من الأفضل اخد نسخة احتياطية للقالب) ← تحرير القالب
2/قم بالدخول لتعديل قالب بلوجر.
3/الآن اضغط على Ctrl + f
4/ثم ابحث عن علامة <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 الأول يبقى على حاله والثاني يأتي مع اسم الرمز.
تخصيص الرموز باستخدام 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).
ماهي مميزات مكتبة Font Awesome ؟
تتميز هذه المكتبة بعدة خصائص التي يجدها المستخدم رائعة و مريحة و من بينها :
- تعدد الأيقونات :
- تحتوي هذه المكتبة على أزيد من 600 أيقونة مختلفة في و الأكثر شيوعا و استخداما من طرف المستخدمين في مختلف المجالات التي تصمم فيها المواقع.
- سهولة التحكم في الأيقونات :
- تتميز أيقونات في هذه المكتبة بسهولة تغيير ألوانها و تصغير أو تكبير حجمها و التحكم بها على أساس أنها خط و ذلك فقط بالcss من خلال بعض الخصائص.
- توافقها مع جميع الأجهزة :
- تتميز مكتبة Font Awesome بتوافقها مع جميع الأجهزة سواء كانت حواسيب مكتبية أو هواتف ذكية و غير و كذلك تتميز بدقتها العالية و وضوحا و و دقة من نوع رتينا Retina التي تعتبر الأكثر وضوحا ذلك الشيء الذي يجعل المكتبة أكثر إحترافا.
- أخري :
- المكتبة مجانية 100 بالمئة بجميع أيقوناتها, يمكنك إستدخدامها داخل وسم <I></I> بإعطائها الكلاس الخاص بالأيقونة.
اهمية اضافة ايقونات التواصل الاجتماعي لـ بلوجر؟
هناك أهمية لهذه الايقونات عبر ربط موقعك الإلكتروني أو مدونتك على بلوجر بمواقع التواصل الاجتماعي الأخرى مما يساعد في تحسين سيو المدونات والمواقع الإلكترونية وأيضاً الشكل الجميل الذي تقدمه هذه الايقونات للمواقع الإلكترونية وسهولة تنقل الزوار من الموقع او المدونة إلى مواقع التواصل الإجتماعي الأخرى ومشاركة المقالات والمنشورات فيها وذلك يزيد من شهرة الموقع الإلكتروني ويساعد في تصدره على المواقع الإلكترونية والمدونات الأخرى.
■بالتوفيق للجميع■
■ مدونه العنودللمعلومات ■
■ تابوعنا على رابط القناه ■
تيليجرام
♧ https://t.me/alamallyy♧
. ■ ( إِنَّ اللَّهَ وَمَلائِكَتَهُ يُصَلُّونَ عَلَى النَّبِيِّ
يَا أَيُّهَا الَّذِينَ آمَنُوا صَلُّوا عَلَيْهِ
وَسَلِّمُوا تَسْلِيمًا