Статті на: Редактор
Ця стаття також доступна на:

Налаштування іконок

Іконки допомагають привернути увагу до ключових елементів, візуально доповнюють текст і роблять інтерфейс сайту більш зрозумілим. У Weblium ви можете додавати іконки за допомогою вбудованих сервісів або завантажувати власні.


У цій статті ви дізнаєтеся, як додати іконки та налаштувати їхній фон, колір і розмір.


Зміст:


Додавання елемента Іконка


Ви можете додати цей елемент у вже існуючу наповнену чи порожню колонку в одному з ваших блоків. Для цього натисніть на іконку додавання нового елемента та виберіть елемент Іконка зі списку доступних:

Підказка: цей елемент ви можете знайти у вкладці Медіа при додаванні елемента. Також елемент Іконка зустрічається як частина інших елементів, наприклад, Список іконок чи Вгору сторінки. У таких елементах налаштування іконки відбуватиметься аналогічно крокам, які ви розглянете у наступних розділах.


Важливо: наразі цей елемент недоступний для Flex-блоку. Замість нього у цьому блоці ви можете використати елемент Зображення.


Додавання іконки


  1. Щоб змінити іконку, клікніть по ній та натисніть Змінити іконку у контекстному меню:

Підказка: ви також можете змінити іконку через налаштування елемента, натиснувши на шестерню у контекстному меню.


  1. У новому вікні ви можете підібрати доречну іконку з інтегрованих сервісів:

Примітка: оскільки присутні платформи є міжнародними, рекомендуємо вводити ключові слова різними мовами, зокрема англійською.


  1. Для сервісів Phosphor та Material ви додатково можете задати бажану вагу та активувати заливку, натиснувши на іконку фільтру:

Примітка: при активації заливки може змінитися вага іконок.


  1. Якщо ви хочете завантажити власну іконку, перейдіть до вкладки Мої іконки. Натисніть на кнопку Завантажити, а потім виберіть потрібний файл зі свого пристрою:

Важливо: власні іконки можна завантажити тільки в форматі .svg. Рекомендований розмір — до 10 КБ. Максимальний розмір — 10 МБ.


Примітка: .svg — це векторний формат, який дозволяє масштабувати зображення без втрати якості. Проте деякі svg-файли можуть містити растрові зображення (наприклад, .png або .jpg) всередині, через що система може не прийняти такий файл та показати помилку під час завантаження.


Налаштування іконок


Після того як ви додали іконку до блоку, ви можете налаштувати її вигляд — змінити розмір, фон та колір.


  1. Щоб відкрити налаштування елемента, клікніть по іконці та натисніть на шестерню у контекстному меню:

  1. У вкладці Загальні ви можете змінити саму іконку, вибрати її розмір з трьох доступних варіантів та вказати бажаний колір:

Важливо: певні іконки можуть мати вбудовані стилі, на які не завжди можливо вплинути інструментами редактора — на опублікованому сайті ви можете бачити інший колір, хоча у редакторі все відображається коректно. У такому випадку, якщо використання бажаного кольору є критичним, варто підібрати іншу іконку.


Підказка: ви можете перейти до налаштувань кольору не відкриваючи налаштування елемента, для цього просто клікніть по іконці, і у контекстному меню ви побачите іконку кольору.


  1. Також у цій вкладці ви можете закріпити елемент, щоб він залишався на екрані під час перегляду сайту:

Примітка: детальніше про закріплення елементів ви можете дізнатися у нашій статті. Зверніть увагу, що ця функція доступна не у всіх блоках.


  1. Перейдіть у вкладку Фон, аби налаштувати фон іконки — Колір, Зображення чи залишити іконку без фону:

  1. У вкладці Дія ви можете вибрати, що буде відбуватися при натиску на іконку — наприклад, ви можете переадресовувати відвідувачів на певну сторінку, відкривати спливаюче вікно тощо:

  1. Не забудьте опублікувати свій сайт, аби зміни відобразилися на ньому.


Оновлено: 15/01/2026

Чи була ця стаття корисною?

Поділіться своїм відгуком

Скасувати

Дякуємо!