Как создать стиль для ссылки с использованием CSS?

Для того чтобы сделать иконки кликабельными, нужно обернуть их в элемент ссылки `<a>`. CSS сам по себе не может сделать иконки кликабельными, если они не находятся внутри тега `<a>`. Вот шаги, которые вам нужно выполнить:

1. **Измените HTML-код:** Убедитесь, что ваши иконки находятся внутри тега `<a>`. Например:

   ```html
   <a href="https://example.com" rel="nofollow">
       <img src="path/to/icon.png" alt="Иконка" />
       ЗАПИСЬ НА КОНСУЛЬТАЦИЮ
   </a>
   ```

   или

   ```html
   <a href="https://example.com" rel="nofollow">
       <span class="icon"></span>
       ЗАПИСЬ НА КУРС
   </a>
   ```

   Убедитесь, что в `span` или `img` добавлены необходимые классы или идентификаторы для стилей.

2. **Добавьте CSS-стили:** Чтобы настроить стиль ссылок, вы можете использовать CSS. Пример стилей:

   ```css
   a {
       text-decoration: none; /* Убираем подчеркивание */
       color: #000; /* Указываем цвет текста */
       display: inline-flex; /* Для выравнивания текста и иконки */
       align-items: center; /* Выравнивание по центру */
   }

   a:hover {
       color: #007bff; /* Цвет при наведении */
   }

   a img, a .icon {
       margin-right: 8px; /* Отступ между иконкой и текстом */
   }
   ```

3. **Проверьте результат:** После внесения этих изменений, иконки должны стать кликабельными. Обязательно протестируйте, чтобы убедиться, что все работает правильно.

Если иконка добавляется через CSS (например, как фон), то в этом случае необходимо будет дополнительно обрабатывать клик по элементу, чтобы он также переходил по ссылке. Например, с помощью JavaScript, но это не обязательно, если вы используете HTML-теги правильно.

Добавляете родителю, который обрамляет ссылку и иконку position: relative , а ссылке добавляете 
 
a::after {
 position: absolute;
 inset: 0;
 content: '';
}