> ## 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-dobavlenie-elementa-ikonka)
* [Добавление иконки](#3-dobavlenie-ikonki)
* [Настройка иконок](#3-nastrojka-ikonok)

### Добавление элемента Иконка

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

### Добавление иконки

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

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

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

4. Если вы хотите загрузить собственную иконку, перейдите на вкладку **Мои иконки**. Нажмите на кнопку **Загрузить**, а затем выберите нужный файл со своего устройства:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-ikonok-ru-5_14ditga.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-ru-6_1ki5zqf.png)
2. Во вкладке **Общие** вы можете изменить саму иконку, выбрать ее **размер** из трех доступных вариантов и указать желаемый **цвет**:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-ikonok-ru-7_uvufzf.png)
||| ${color}[#f97700](Важно:) некоторые иконки могут иметь встроенные стили, на которые не всегда можно повлиять инструментами редактора — на опубликованном сайте вы можете видеть другой цвет, хотя в редакторе все отображается корректно. В таком случае, если использование желаемого цвета является критическим, стоит подобрать другую иконку. 

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

3. Также в этой вкладке вы можете **закрепить** элемент, чтобы он оставался на экране во время просмотра сайта:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-ikonok-ru-8_ajm436.png)
|| ${color}[#ffa800](Примечание:) подробнее о закреплении элементов вы можете узнать [в нашей статье](/ru/article/fiksaciya-elementov-na-ekrane-pri-prokrutke-72tf5i/). Обратите внимание, что эта функция доступна не во всех блоках.

4. Перейдите во вкладку **Фон**, чтобы настроить фон иконки — **Цвет**, **Изображение** или оставить иконку без фона:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-ikonok-ru-9_fl6l76.png)
5. Во вкладке **Действие** вы можете выбрать, что будет происходить при нажатии на иконку — например, вы можете переадресовывать посетителей на определенную страницу, открывать всплывающее окно и т. д.: 
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-ikonok-ru-10_1fpg20m.png)
6. Не забудьте [опубликовать свой сайт](/ru/article/publikaciya-sajta-1xvrq6l/), чтобы изменения отобразились на нем.