Показ иконки вместо номера

• Инструкции
• О системе
• Подключение
• Google Tag Manager
• Вопросы и ошибки
• Настройка Zoiper
• Отложенный показ
• Оптимизация Яндекс Директ
• Интеграции
• Яндекс Метрика
• Google Analytics
• Albato
• ApiX-Drive
• Bitrix24 CRM
• AmoCRM
• Webhooks / API
• Телефония и АТС
• Вся телефония
• Новофон
• Мегафон
• МТС Exolve
• OnlinePBX
• Sipuni
• MCN Telecom
• МГТС
• ДОМ.РУ
• Гравител
• Энфорта
• ТТК Транстелеком
• Asterisk
• Zadarma
• Мобильные SIM-карты
• Конструкторы и CMS
• Тильда
• Битрикс24
• 1С Bitrix
• Joomla
• Другие
• Регионы
• Видео

Вариант 1

Данная иконка, вставлена фоном со следующим стилем:
<div class="phoneAllostat phoneAllostatMob" style="height: 40px; width: 40px; background: no-repeat; background-image: url(https://allostat.ru/img/icon-phone.png);">
<a href="tel:+7 (495) 000-00-00" ></a>
</div>
Под ней в ссылке a href="tel: находится аналитический номер, который виден в строке состояния, если навести на иконку курсор. Этот номер совпадает с аналитическим номером, который виден в шапке.

Для этого, чтобы на мобильных версиях сайта показывать иконку вместо аналитического номера, необходимо:

1. Добавить к разметке вашей иконки класс phoneAllostat phoneAllostatMob, так чтобы получилось class="phoneAllostat phoneAllostatMob"
2. Добавить внизу основного скрипта код:
   var phoneAllostatMob = document.querySelectorAll('.phoneAllostatMob')[0];
phoneAllostatMob.innerHTML = '<a href="tel:+7 (495) 000-00-00" style="font-size: 1px; color: transparent; padding: 25px 25px;"></a>';

где, при помощи querySelectorAll мы находим класс phoneAllostatMob, далее при помощи innerHTML вставляем ссылку a href="tel: с аналитическим номером.

• +7 (495) 000-00-00 - ваш основной (не аналитический) номер по умолчанию.
• font-size: 1px; - делает номер едва заметным.
• color: transparent; - делает номер бесцветным.
• padding: 25px 25px; - делает область вокруг номера кликабельной. Необхоимо подогнать под ваш размер дизайна.

Две иконки на странице

• Для второй иконки необходимо добавить внизу основного скрипта еще один код:
  var phoneAllostatMob = document.querySelectorAll('.phoneAllostatMob')[1];
phoneAllostatMob.innerHTML = '<a href="tel:+7 (495) 000-00-00" style="font-size: 1px; color: transparent; padding: 25px 25px;"></a>';
• Во второй иконке добавляется [1] после ('.phoneAllostatMob')[1]; , т.к. в js скриптах отсчет идет не от единицы, а от ноля.

Это нижняя иконка.