شريط أيقونات متعدد الإستخدامات

إن كان لديك صفحات مهمة تريد ابرازها لزوار مدونتك , أو لديك راوبط معينة تريد أن تلفت النظر اليها 

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

<style>
#banner-icons-cont{--bannersi-color:#2C4C68;background-color:var(--bannersi-color);padding:20px;border-radius:4px;display:flex;flex-direction:column;gap:30px;align-items:center;}
#banner-icons-cont *{box-sizing:border-box;}
#banner-icons-cont h5{margin:0;padding:0;font-size:130%;color:#fff;text-shadow:1px 1px 1px #000;}
.banner-icons{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;width:100%;}
.banner-icons a{text-decoration:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;justify-content:center;text-align:center;align-items:center;background-color:rgba(255,255,255,.2);padding:15px;border-radius:4px;color:#fff;height:80px;transition:all .4s;}
.banner-icons a i{order:-1;font-size:24px;}
.banner-icons a:hover{background-color:#fff;color:#000;}
</style>


<div id="banner-icons-cont">

<h5>عنوان الشريط</h5>

<div class='banner-icons'>

<!--بداية رابط-->
    <a href="#"  target="_blank">
      <i class="fa-brands fa-facebook-f"></i>
      <span>أسم الأيقونة</span>
    </a>
<!--نهاية رابط-->

 
</div>

</div>

شرح الإستخدام

هذا #2C4C68 هو كود لون الإضافة عدله بما تريد

كرر كود الرابط من بدايته الى نهايته للحصول على رابط جديد

رمز # في الرابط استبدله بالرابط المراد فتحه

هذا الكود استبدله بكود الأيقونة 

find<i class="fa-brands fa-facebook-f"></i>

• 💢
• معاينة

مواقع بلوجر بالعربي

إضافات شروحات أدوات قوالب برامج دليل بلوجر