Как добавить свою иконку на кнопку в Тильде

Подробное руководство о том, как добавить свою иконку на кнопку в конструкторе Tilda. Настройка стилей и размещения иконки. Примеры готового кода для Zero Block.
  1. В Zero block добавить кнопку.
  2. Удалить у кнопки фон.
  3. Добавляем кнопке класс button-new
  4. Добавить иконку и убрать ее за область видимости.
  5. Скопировать URL иконки. (правая кнопка мыши Copy image URL).
  6. Добавить блок Т123.
  7. Добавить код в блок и заменить в коде параметры цвета, скругление углов, добавить URL иконки.

<style>
.button-new {
/* Меняем цвет фона кнопки */
background-color: #515fe1;
/* Добавляем иконку */
background-image: url(https://static.tildacdn.com/tild3939-3738-4036-a432-613438383166/icons8-phone_1.svg);
/* Размер иконки */
background-size: 18px;
background-repeat: no-repeat;
/* Отступ иконки от края кнопки и от текста */
background-position: 30px center;
/* Отступ текста от иконки */
padding-left: 20px;
/* Скругление углов */
border-radius: 30px;
}
</style>

Поделиться записью

Telegram
WhatsApp
VK
Facebook
Email

Рекомендуем