URL скопирован в буфер обмена!
Как добавить свою иконку в кнопку Zero Block?
При помощи этой модификации можно добавить свою иконку в кнопку Zero Block. Дополнительно можно настроить ховер эффект и поворот иконки. Скрипт поддерживает квадратные и прямоугольные иконки и автоматически адаптирует их на разных экранах
Модификация обновлена. Оптимизирован код, исправлены ошибки
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
Класс для кнопки
url иконки
url иконки при наведении
Расположение иконки
Форма иконки
Вермя ховвера
Градус поворота иконки при наведении
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD040--><style>
.ti-btn .tn-atom::after {
content: '';
width: 1em;
height: 1em;
top: -0.1em;
margin: 0px 0px 0px 10px;
display: inline-block;
background-size: cover;
background-repeat: no-repeat;
vertical-align: middle;
position: relative;
transition: 0.2s ease;
background-image: url(https://static.tildacdn.one/tild3765-6234-4461-b235-643932303665/Group_2063.svg);
}
.ti-btn:hover .tn-atom::after {
transform: rotate(0deg);
background-image: url(https://static.tildacdn.one/tild6139-3832-4262-b338-393363316635/Group_2060.svg);
}
</style>
1. Создаем кнопку в Zero Block и задаем ей класс ti-btn
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
2. Создаем блок GL02, удаляем контент и загружаем в блок иконку. Копируем url иконки(для этого в "контенте" кликаем пкм по картинке, в списке выбираем "копировать адрес изображения" и вставляем адрес в генератор в поле "url иконки"). Если при наведении на кнопку не нужно чтобы иконка менялась, то дублируем ссылку в поле "url иконки при наведении". Если нужно чтобы при наведении была другая иконка, то загружаем в блок вторую иконку, копируем url иконки и вставляем в поле "url иконки при наведении". После этого скрываем блок GL02, кликнув на глаз;
3. Указываем дополнительные настройки в генераторе:
Расположение иконки - указывает с какой стороны от текста будет расположена иконка;
Форма иконки - указываем форму иконки которую мы загрузили(квадрат или прямоугольник)
Время ховера - указываем время за которое будет происходить изменение и поворот иконки(если указали). Стандартное значение 0.2
Поворот иконки - указываем градус поворота иконки при наведении. Значение может быть плюсовое(например 90) - иконка поверчивается вправо или минусовое(например -75) - иконка поворачивается влево. Важно! При использовании поворота лучше загружать квадратные иконки;
4. Копируем готовый код и вставляем в HTML блок Т123. При адаптации кнопки(например уменьшения текста на мобилке, иконка самостоятельно будет уменьшаться и адаптироваться).
Примечание! Если у вас несколько кнопок и в каждую нужно загнать свою иконку, то нужно сознать несколько кодов изменив при этом класс ti-btn на уникальный. Например для первой кнопки ti-btn1, для второй ti-btn2 и т. д.
Модификация плохо работает с градиентными кнопками!
Вместо GL02 можно использовать любой другой блок для загрузки изображения. Можно также загрузить изображение в зеро блок, вынести за пределы видимой области и потом скопировать url.
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
2. Создаем блок GL02, удаляем контент и загружаем в блок иконку. Копируем url иконки(для этого в "контенте" кликаем пкм по картинке, в списке выбираем "копировать адрес изображения" и вставляем адрес в генератор в поле "url иконки"). Если при наведении на кнопку не нужно чтобы иконка менялась, то дублируем ссылку в поле "url иконки при наведении". Если нужно чтобы при наведении была другая иконка, то загружаем в блок вторую иконку, копируем url иконки и вставляем в поле "url иконки при наведении". После этого скрываем блок GL02, кликнув на глаз;
3. Указываем дополнительные настройки в генераторе:
Расположение иконки - указывает с какой стороны от текста будет расположена иконка;
Форма иконки - указываем форму иконки которую мы загрузили(квадрат или прямоугольник)
Время ховера - указываем время за которое будет происходить изменение и поворот иконки(если указали). Стандартное значение 0.2
Поворот иконки - указываем градус поворота иконки при наведении. Значение может быть плюсовое(например 90) - иконка поверчивается вправо или минусовое(например -75) - иконка поворачивается влево. Важно! При использовании поворота лучше загружать квадратные иконки;
4. Копируем готовый код и вставляем в HTML блок Т123. При адаптации кнопки(например уменьшения текста на мобилке, иконка самостоятельно будет уменьшаться и адаптироваться).
Примечание! Если у вас несколько кнопок и в каждую нужно загнать свою иконку, то нужно сознать несколько кодов изменив при этом класс ti-btn на уникальный. Например для первой кнопки ti-btn1, для второй ti-btn2 и т. д.
Модификация плохо работает с градиентными кнопками!
Вместо GL02 можно использовать любой другой блок для загрузки изображения. Можно также загрузить изображение в зеро блок, вынести за пределы видимой области и потом скопировать url.
