زر قائمة أيقونات بإعداداتك الشخصية

 هذه الإضافة ستكون مناسبة كثيراً إن كانت لديك روابط أو صفحات تريد لفت الإنتباه لها وفي نفس الوقت لا تشغل حيز في المدونة

الإضافة عبارة عن زر عند الضغط عليه يظهر مجموعة أيقونات , ويمكنك التحكم في عدد الأيقونات الظاهرة وشكلها

أضف كود القائمة في آداة HTML/JavaScript

<style>

#cnmuicons-menu{--icosize:48px;position:fixed;right:20px;bottom:100px;width:var(--icosize);display:flex;flex-direction:column-reverse;gap:10px;}

#iconbut{position:absolute;visibility:hidden;opacity:0;}

#cicons{display:flex;flex-direction:column;gap:10px;opacity:0;visibility:hidden; margin-bottom:-10px; transition:all .4s;}

#iconbut:checked ~ #cicons{display:flex;visibility:visible;opacity:1; margin-bottom:0;}

#cbuttons{display:block;width:var(--icosize);height:var(--icosize);line-height:var(--icosize);text-align:center;background-color:#446EAC;cursor:pointer;color:#fff;border-radius:50%;font-size:20px;}

#cicons a{display:block;width:var(--icosize);height:var(--icosize);line-height:var(--icosize);font-size:20px;border-radius:50%;text-align:center;color:#fff;transition:background-color .4s;}

#cicons a:hover{background-color:#111!important;}

#cicons a:nth-child(1) {background-color:#333}

#cicons a:nth-child(2) {background-color: #00D25C}

#cicons a:nth-child(3) {background-color:#1B8EF2}

#cicons a:nth-child(4) {background-color:#C60645}

#cicons a:nth-child(5) {background-color:#FF5400}

</style>

<div id="cnmuicons-menu">

<input id="iconbut" type="checkbox">

<label id="cbuttons" for="iconbut"><i class="fa-solid fa-icons"></i></label>

<div id="cicons">

<a href="#"><i class="fa-solid fa-envelope"></i></a>

<a href="#"><i class="fa-brands fa-whatsapp"></i></a>

<a href="#"><i class="fa-solid fa-circle-info"></i></a>

<a href="#"><i class="fa-solid fa-sitemap"></i></a>

<a href="#"><i class="fa-solid fa-phone"></i></a>

</div>

</div>

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

- الرقم 48 المعلم بالأحمر هذا هو حجم الأيقونات يمكنك التحكم فيه بالزيادة أو النقصان

- اللون #446EAC هو لون الزر الأساسي عدله بما تريد

- باللون الأخضر علمت لك كود أيقونة , كل سطر تحته هو كود أيقونة أيضاً حذف سطر يلغي أيقونة زيادة سطر يضيف أيقونة   علمت لك كودها بالأحمر بحيث تعرف آخر واحدة

فيه جزء باللون البرتقالي هذا هو كود الأيقونة يمكنك ايجاد ايقونات أخرى هنـــــــا

- رمز # تستبدله بالرابط المراد فتحه عند الضغط على الأيقونة

- باللون الوردي كود مسؤول عن لون الأيقونات كما ترى هناك 5 أكواد من واحد الى 5 كل كود مسؤول عن لون أيقونة بترتيبهم زيادة أيقونات تزيد كود وتعدل الرقم فيه الى 6 وهكذا

قم بإعدادها بالأيقونات التي تريد , واستخدام موفق

تعديل