Установка события onclick для пустого промежутка (набор иконок в CSS)?

Question

Я унаследовал кодовую базу, в которой значки установлены на изображении с использованием некоторых <span> различий по изображению. Пролеты выглядят примерно так:

<span class='circle_logo'></span>

Мне нужно, чтобы что-то произошло в событии onclick этих значков.

В прошлом я преодолел эту проблему, переключившись на <button>, но в данном случае это не работает (оно портит конкретное размещение). Я попытался добавить несколько   s к диапазонам, но это не сработало, похоже, даже если я добавляю символы, клики должны быть на реальных пикселях символов. Есть мысли?

Спасибо за чтение.

Answer 1

Предполагая, что span как-то виден, просто присоедините обработчик, используя Javascript, например:

document.querySelector('.circle_logo').addEventListener('click', () => {
  console.log('clicked');
});

.circle_logo {
  background-image: url("https://www.gravatar.com/avatar/681cf17a49fa99ff9aa2289734aafac2?s=32&d=identicon&r=PG");
  display: inline-block;
  width: 30px;
  height: 30px;
}

<span class='circle_logo'></span>