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

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

المعاينات والمرفقات

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

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

تعتمد الأيقونة على وجود خط الأيقونات 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 لون النص عند التمرير 
معاينة حية للإضافة

تعليقات

7

- شاركنا بتعليق فتعليقك يخبرنا بمدى جدوى ما نقدمه
- تشجيعك أو النقد البناء عاملين أساسيين لتطوير محتوانا
- كذلك لو لديك سؤال حول محتوى الموضوع أو شئ نسينا ذكره يرجى مشاركتنا به

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

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

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

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

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

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

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

      حذف