> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.weblium.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

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

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

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

**Зміст**:
* [Додавання елемента Іконка](#3-dodavannya-elementa-ikonka)
* [Додавання іконки](#3-dodavannya-ikonki)
* [Налаштування іконок](#3-nalashtuvannya-ikonok)

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

 Ви можете додати цей елемент у вже існуючу наповнену чи порожню колонку в одному з ваших блоків. Для цього натисніть на **іконку додавання нового елемента** та виберіть елемент **Іконка** зі списку доступних:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-ikonok-ukr-1_xspvww.png)
| ${color}[#1aa900](Підказка:) цей елемент ви можете знайти у вкладці Медіа при додаванні елемента. Також елемент Іконка зустрічається як частина інших елементів, наприклад, Список іконок чи Вгору сторінки. У таких елементах налаштування іконки відбуватиметься аналогічно крокам, які ви розглянете у наступних розділах.

||| ${color}[#f97700](Важливо:) наразі цей елемент недоступний для Flex-блоку. Замість нього у цьому блоці ви можете використати елемент Зображення.

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

1. Щоб змінити іконку, клікніть по ній та натисніть **Змінити іконку** у контекстному меню:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-ikonok-ukr-2_21neg9.png)
| ${color}[#1aa900](Підказка:) ви також можете змінити іконку через налаштування елемента, натиснувши на шестерню у контекстному меню.

2. У новому вікні ви можете підібрати доречну іконку з інтегрованих сервісів:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-ikonok-ukr-3_vlbtnr.png)
|| ${color}[#ffa800](Примітка:) оскільки присутні платформи є міжнародними, рекомендуємо вводити ключові слова різними мовами, зокрема англійською.

3. Для сервісів Phosphor та Material ви додатково можете задати бажану вагу та активувати заливку, натиснувши на іконку **фільтру**:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-ikonok-ukr-4_1cipm0b.png)
|| ${color}[#ffa800](Примітка:) при активації заливки може змінитися вага іконок. 

4. Якщо ви хочете завантажити власну іконку, перейдіть до вкладки **Мої іконки**. Натисніть на кнопку **Завантажити**, а потім виберіть потрібний файл зі свого пристрою:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-ikonok-ukr-5_1oseqtq.png)
||| ${color}[#f97700](Важливо:) власні іконки можна завантажити тільки в форматі .svg. Рекомендований розмір — до 10 КБ. Максимальний розмір — 10 МБ.

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

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

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

1. Щоб відкрити налаштування елемента, клікніть по іконці та натисніть на шестерню у контекстному меню:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-ikonok-ukr-6_vibvs1.png)
2. У вкладці **Загальні** ви можете змінити саму іконку, вибрати її **розмір** з трьох доступних варіантів та вказати бажаний **колір**:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-ikonok-ukr-7_14ll2bt.png)
||| ${color}[#f97700](Важливо:) певні іконки можуть мати вбудовані стилі, на які не завжди можливо вплинути інструментами редактора — на опублікованому сайті ви можете бачити інший колір, хоча у редакторі все відображається коректно. У такому випадку, якщо використання бажаного кольору є критичним, варто підібрати іншу іконку. 

| ${color}[#1aa900](Підказка:) ви можете перейти до налаштувань кольору не відкриваючи налаштування елемента, для цього просто клікніть по іконці, і у контекстному меню ви побачите іконку кольору.

3. Також у цій вкладці ви можете закріпити елемент, щоб він залишався на екрані під час перегляду сайту: 
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-ikonok-ukr-8_1fpswtm.png)
|| ${color}[#ffa800](Примітка:) детальніше про закріплення елементів ви можете дізнатися [у нашій статті](/uk/article/zakriplennya-elementiv-na-ekrani-pid-chas-prokrutki-s3oz9k/). Зверніть увагу, що ця функція доступна не у всіх блоках.

4. Перейдіть у вкладку **Фон**, аби налаштувати фон іконки — **Колір**, **Зображення** чи залишити іконку без фону:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-ikonok-ukr-9_rb83bi.png)
5. У вкладці **Дія** ви можете вибрати, що буде відбуватися при натиску на іконку — наприклад, ви можете переадресовувати відвідувачів на певну сторінку, відкривати спливаюче вікно тощо: 
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-ikonok-ukr-10_1b5sh2x.png)
6. Не забудьте [опублікувати свій сайт](https://help.weblium.com/uk/article/publikaciya-sajtu-16hom55/), аби зміни відобразилися на ньому.