Как сделать так, чтобы значок и кнопка имели одинаковый идентификатор?

Question

Итак, на моем веб-сайте у меня есть кнопки, которые выполняют определенную функцию, когда вы нажимаете на них. Эти кнопки имеют уникальный идентификатор. Когда вы видите веб-сайт на телефоне, вы видите значки, а не текст кнопок. Я это уже сделал. Я хочу, чтобы когда вы видите значок, вы можете щелкнуть по нему и заставить его выполнять ту же функцию, что и кнопка с идентификатором. Вот что я сделал до сих пор:

<div class="map-button-container">
      <i class="fas fa-utensils"></i><button id="restaurants" class="map-button">restaurants</button>
      <i class="fas fa-coffee"></i><button id="coffeeshops" class="map-button">coffeeshops</button>
      <i class="fas fa-bed"></i><button id="accomodation" class="map-button">accomodation</button>
      <i class="fas fa-snowboarding"></i><button id="activities" class="map-button">activities</button>
      <i class="fas fa-tree"></i><button id="parks" class="map-button">parks</button>
      <i class="fas fa-glass-martini-alt"></i><button id="bars" class="map-button">bars</button>
      <button id="register" class="map-button">register</button>
</div>

Answer 1

Если я правильно понял ваш вопрос, вы можете добавить значок Font Awesome внутри <button>. Таким образом, вам не придется беспокоиться о лишних JavaScript. Когда пользователь нажимает кнопку, он выполняет определенное действие. Это самый простой способ.

<div class="map-button-container">

    <button id="restaurants" class="map-button">
        <i class="fas fa-utensils"></i>
        <span>restaurants</span>
    </button>

...

</div>
  

Answer 2

Я добавил в функцию класс иконки :) работает! Теперь, нажимаю ли я на кнопку или на значок, функция работает!

 $("#restaurants, .fa-utensils").click(function () {
           var oslo = { lat: 59.9160454, lng: 10.7362453 };
           var map = new google.maps.Map(document.getElementById("map"), {
                zoom: 14,
                center: oslo,
 });

Answer 3

Вы можете разместить свой значок внутри кнопки , а текст кнопки может быть в каком-либо встроенном элементе, например <span>, и на телефоне вы можете скрыть диапазон, таким образом можно применить щелчок.

<div class="map-button-container">
     <button id="restaurants" class="map-button"> <i class="fas fa-utensils"></i><span>restaurants</span></button>
      <button id="coffeeshops" class="map-button"><i class="fas fa-coffee"></i><span>coffeeshops</span></button>         
      <button id="register" class="map-button">register</button>
</div>

Дело в том, что вам нужно будет стилизовать текст и значок диапазона в соответствии с вашим предыдущим дизайном согласно требованиям.