لغة القالب

قائمة روابط مدعومة بأيقونات متجاوبة وسهلة الإستخدام

Admin
الأحد, أكتوبر 15, 2023
أقدم لكم قائمة متجاوبة تعرض أيقونة ونص مما يعطي شكل جمالي لها كذلك هي متجاوبة فيمكنك أن تركبها في اى مكان في القالب سواء إضافة او حتى صفحة أو موضوع 

قائمة روابط مدعومة بأيقونات متجاوبة وسهلة الإستخدام

تعتمد الأيقونة على وجود خط الأيقونات FontAwesome

<style>
#cnmu-blocks{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));margin-bottom:20px;}
#cnmu-blocks a{text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background-color:#f8f8f8;padding:10px!important;color:#444;transition:all .4s ease;font-size:14px;}
#cnmu-blocks a:hover{background-color:#446EAC;color:#fff;}
#cnmu-blocks i{font-size:32px;}
#cnmu-blocks i::before,#cnmu-blocks i::after{transition:none;}
</style>

<div id="cnmu-blocks">

<!--URL Start-->
<a href="#" target="_blank">
<i class="fa fa-home"></i>
<span>الصفحة الرئيسية</span>
</a>
<!--URL End-->

</div>
الكود الأزرق كرره لتحصل على أيقونة جديدة
الكود الأحمر فيه هو رمز الأيقونة HTML يمكنك نسخ الرمز الذي تريد من هنـــا
رمز # استبدله بالرابط الذي تريد أن يفتح عند الضغط على الأيقونة 
وطبعا استبدل كلمة الصفحة الرئيسية بما تريد

رقم 120 استبدله بالحجم الأدنى للرابط
هذا #f8f8f8 هو لون خلفية الرابط
وهذا #444 هو لون نص الروابط
هذا #446EAC هو اللون عند التمرير
وهذا #fff لون النص عند التمرير 
معاينة حية للإضافة

تعليقك يساهم في تطوير المحتوى ويزيد من الفائدة بمشاركتنا بأفكارك واقتراحاتك , رأيك يهمنا فساهم بتعليقاتك معنا
يرجى عدم وضع روابط خارجية في التعليقات لضمان نشرها

  1. موضوع إحترافي جدا أستاذ
    الله يحفظك يارب العالمين 🤲

    ردحذف
  2. جربتها رائعة لكن
    الأيقونات بعيدتين على بعضهما البعض

    ردحذف
    الردود
    1. مرحباً يا غالي , الله عزك ويرفع قدرك
      بالنسبة لبعد الأيقونات عن بعضها يمكنك التحكم فيه عبر هذا الجزء
      gap:10px;
      قم بتقليل او يزادة الرقم 10

      حذف
    2. الله يحفظك ويطول في عمرك يارب 🤲

      حذف
  3. اريد ان أجعلها مثل الموجودة في أسفل موضوعك 💕
    صراحة جربت كل شء ولم أعرف 🔔

    ردحذف
    الردود
    1. أضف الرابط الذي انت ركبتها عليه وتظهر لديك غير مضبوطة فيه

      حذف
    2. أعد نسخ الكود أخي منصة بلوجر أضافة رمز مسافة في الكود هو ما كان يبب المشكلة ولانها مسافة كان مخفي لا يظهر إلا بالكود الداخلي انا ضبطه الآن جرب تنسخ الكود من جديد

      حذف

عدد المواضيع