....اتمنى توصل

بما أن الأيقونات روابط نستخدم الوسم a ونضعهم في قائمة ul. (حاول التعديل بالشكل المطلوب على الهيكلية التالية

العنصر الذي ننقر عليه نضيف له صنف يتحكم بالخلفية عن طريق جافاسكربت ونزيل نفس الصنف من باقي العناصر

<!-- روابط الأيقونات -->
<div id="navLinks">
    <ul>
        <li class="itemLinks"></li>
        <li class="itemLinks"></li>
        <li class="itemLinks"></li>
        <li class="itemLinks"></li>
    </ul>
</div>

ثم حدد لهم تنسيقات في CSS
#navLinks ul li 
{
    text-align: center;
    margin: 10px;
    padding: 5px;
    cursor: pointer;
    list-style: none;
    border-radius: 50%;
}
نستهدف حالة التفعيل 
#navLinks ul li.active 
{
    background-color: #333;
}

ثم في جافاسكربت/جيكويري
نجلب جميع عناصر القائمة
var $links = $(".itemLinks");
ونمر عليهم
$links.click(function (e) {
    $links.removeClass("active");  نحذف صنف التفعيل من جميع العناصر
    var clickedLink = e.target;
    clickedLink = $(clickedLink);
    clickedLink.addClass("active"); نضيف صنف التفعيل للعنصر المنقور عليه
});

$($links[0]).addClass("active"); // افتراضيا أول عنصر يتم تحديده
أي عند فتح الصفحة سيضظهر أول عنصر مفعل وله الصنف
active
<li class="itemLinks active"></li>
                 ^^^^^^^^^^^^^

قم بزيارة هذا الرابط اسفله.

ربما تجد هناك ماتحتاجه.

يمكنك أن تقوم بذلك عن طريق إستخدام الجافاسكريبت كالتالي

1. تقوم بإنشاء class وتعطيه الخواص التي تريد الحصول عليها عند الضغط على العنصر
2. تقوم بإنشاء دالة لتستقبل حد الضغط (onclick event)
3. تقوم بإزالة الclass عن باقي الأيقونات عبر الشفرة البرمجية بالأسفل
4. تقوم بإضافة الclass إلى الأيقونة المضغوط عليها عبر الشفرة البرمجية بالأسفل

function onclick(e){
    document.querySelector(".اسم الكﻻس").classList.remove("سم الكﻻس")
    e.target.classList.add('اسم الكﻻس')
    }
  
  
  

ما ترد بعدما اعدل علية