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

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

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

معاينة حية للإضافة

الصفحة الرئيسية المفضلة الإعدادات البوم الصور فيديوهات هدايا سياحة تعليقات

تعديل