Иконка в кнопке Зеро блока

Для того чтобы добавить иконку к кнопке в Зеро блоке нужно сделать следующее:

1. Создаём Зеро Блок и переходим в режим редактирования, нажав на кнопку «Редактировать блок»;
2. Дальше нажимаем на иконку «+» в левом верхнем углу и добавляем кнопку, нажав на пункт «Add Button»;
3. Настраиваем внешний вид кнопки по своему желанию и переходим к настройки модификации для добавления иконки;

4. Для использования модификации вам нужно заполнить следующие поля:

• «Класс» — В этом поле вам нужно придумать и написать короткое название для класса, которое мы будем добавлять к кнопке, чтобы модификация понимала к какой кнопке ей добавлять иконку. Например — iconbtn;
• «Расположение иконки» — При нажатии на данную настройку вы сможете выбрать расположение иконки в кнопке. Доступно 2 варианта размещения иконки, слева или справа от названия кнопки;
• «Прижать иконку к краю кнопки» — При нажатии на данную настройку вы сможете изменить положение иконки внутри кнопки, приближая её к краю. Можете указать отступ в пикселях от края кнопки чтобы контролировать расстояние между иконкой и краем кнопки.
• «Расположить контент внутри кнопки по центру» — включите чекбокс, если нужно разместить иконку и текст по центру кнопки;
• «Отступ» — В этом поле вы можете указать отступ между иконкой и названием кнопки;
• «Размер иконки» — В этом поле указывается размер иконки в px. Значение, которое вы укажите в данном поле будет применяться для ширины и высоты (например, 16px);
• «Регулировка позиции иконки по высоте (px)» — Иконки бывают разных размеров и форм, поэтому с помощью данной настройки вы можете отрегулировать позицию иконки по высоте внутри кнопки;
• «Ссылка — Иконка в кнопке» — В данном поле нужно указать ссылку на иконку. Для того чтобы получить рабочую ссылку на иконку вы можете воспользоваться блоком «IM01 Изображение». Добавьте блок изображение, откройте режим редактирования контента, нажав на кнопку «Контент». В открывшейся панели нажмите на кнопку «Загрузить файл» и загрузите вашу иконку. Рядом с загруженной иконкой появится строчка с ссылкой для иконки, наведите на эту строчку и нажмите на правую кнопку мыши и скопируйте ссылку. Блок «IM01 Изображение» вам больше не понадобится, вы можете его удалить, а полученную ссылку иконки используйте в модификации;
• «Ссылка — Иконка при наведении» — Если вы хотите настроить изменение цвета иконки при наведении, то в этом поле вы можете указать ссылку на вашу иконку с измененным цветом. О том как добавить иконку для получения рабочей ссылки, мы описали в предыдущем пункте;
• «Градус поворота иконки при наведении» — В данном поле вы можете настроить градус поворота иконки при наведении;
• «Размер иконки при наведении» — Также вы можете указать размер иконки, который будет при наведении на иконку;
• «Длительность смены иконок (сек)» — скорость смены иконок при наведении;
• «Длительность смены поворота и размера иконок (сек)» — скорость смены поворота иконки при наведении.
• «Включите эту галочку, если размер кнопки с модом становится больше чем оригинал» — этот чекбокс нужно включать, если после добавления иконки кнопка стала шире, чем была раньше.

5. После того как заполнили все поля в модификации, скопируйте название класса, которое вы указали в поле «Класс» и перейдите в Зеро блок;
6. Чтобы добавить иконку к кнопке нужно задать класс к вашей кнопке. Для этого нажмите правой кнопкой мыши на вашу кнопку и выберите пункт «Add CSS Class Name»;
7. В открывшейся панели, в поле «CSS Class Name» укажите класс, который вы придумали и указали в модификации;
8. Сохраните изменения и перейдите во вкладку модификации;
9. Копируем сгенерированный HTML код и вставляем его в блок Т123;

Имей в виду:

• Загружай большие иконки, например, с фреймом 500×500
• При создании своих иконок в графическом редакторе не используй маски, иконка должна быть единой
• Чтобы настроить длительность смены иконки при наведении, убедись, что все поля в генераторе модификации заполнены.