Как добавить пользовательские значки в Elementor: 3 способа

Ключевые выводы

• Всплывающее окно "Библиотека значков" Elementor по умолчанию показывает только Font Awesome, в наборах "Обычный", "Солидный" и "Бренды", и каждый виджет с полем значков открывает то самое всплывающее окно.
• Самый быстрый способ добавить пользовательские значки в Elementor - это кнопка "Загрузить SVG" в поле значка; если файл отклонен, включите "Включить нефильтрованные загрузки файлов" в разделе "Элементор" > "Настройки" > "Дополнительно".
• Экран пользовательских значков Elementor Pro импортирует целый шрифт значков из файла Fontello, IcoMoon или Fontastic.zip и перечисляет его в разделе "Мои библиотеки" во всплывающем окне "Библиотека значков".
• Elementor Pro также подключает Font Awesome Pro: вставьте идентификатор вашего комплекта в раздел "Элементор" > "Настройки" > "Интеграции" и нажмите "Проверить идентификатор комплекта", чтобы добавить стили Pro в устройство выбора.
• Расширение библиотеки значков Master Addons добавляет 8 пакетов значков с 5344 значками в одно и то же всплывающее окно, а значки Feather, значок ремикса и Teenyicons в этом наборе требуют Master Addons Pro.

Вы можете добавить пользовательские значки в Elementor тремя способами: загрузить SVG в любое поле значков, импортировать собственный шрифт значков с Elementor Pro или включить дополнительные пакеты значков из главных надстроек. все три попадают в одно и то же всплывающее окно библиотеки значков, которое предлагает только Font Awesome, пока вы не добавите к нему что-нибудь.

Это руководство проходит через каждый метод с точными настройками, чтобы щелкнуть, затем сравнивает их в одной таблице, чтобы вы могли выбрать правильный. После этого он охватывает стиль (цвет, размер и зависание) и проблемы, которые люди чаще всего сталкиваются, например значки, которые отображаются как пустые квадраты.

Три способа добавления пользовательских значков в Elementor

Метод, который подходит, зависит от того, сколько значков вам нужно и есть ли они уже в виде файлов.

• Для одного или двух значков, таких как отметка логотипа, загрузите SVG прямо в поле значка (Метод 1).
• Для собственного набора брендов импортируйте его в виде шрифта значков с пользовательскими значками Elementor Pro (метод 2).
• Чтобы получить большой выбор готовых значков, которые нечего загружать, включите пакеты значков в Master Addons (метод 3).

Вы можете смешать все три на одной странице Загруженный SVG, Набор пользовательских значков, Font Awesome и пакет Master Addons могут все сидеть на одной странице, потому что каждый из них является просто другим источником для того же поля значков.

Способ 1: встроенная библиотека значков Elementor и загрузка SVG

Каждый виджет Elementor с полем значков открывает одно и то же всплывающее окно библиотеки значков, будь то значок, поле значков, список значков, кнопка или значки социальных сетей. Из поля всплывающее окно перечисляет шрифт Awesome в трех наборах: обычный, твердый и бренды.

1. Добавьте на свою страницу виджет значков или любой виджет со значком.
2. На вкладке Содержимое наведите курсор на предварительный просмотр значка Появляются две кнопки: Библиотека значков и Загрузить SVG.
3. Нажмите "Библиотека значков", чтобы выбрать значок "Удивительный шрифт", или загрузите SVG, чтобы использовать свой собственный файл.

Загрузить SVG - самый быстрый способ добавить один собственный значок, как знак логотипа клиента.WordPress блокирует загрузку SVG по умолчанию, поэтому, если Elementor откажется от файла, включите Включить загрузку нефильтрованных файлов под Elementor > Настройки > Дополнительно. сделайте это только в том случае, если вы доверяете всем, кто может загружать файлы на сайт, так как SVG может нести код.

Каждый SVG - это отдельная загрузка, для просмотра или поиска позже не установлено. Элементор Статья справки библиотеки значков также отмечает, что виджеты Accordion и Toggle используют небольшие встроенные элементы управления значками вместо обычного предварительного просмотра, но они открывают одно и то же всплывающее окно. как только вам понадобится больше, чем несколько значков, следующие два метода экономят время.

Способ 2: Загрузите набор значков с помощью пользовательских значков Elementor Pro

Elementor Pro может загружать собственный шрифт значков в сборщик как отдельную вкладку. Он принимает файлы.zip, экспортированные из Фонтелло, IcoMoon или Fontastic, так что можно построить набор из SVG своего бренда и держать его в одном месте.

1. Создайте свой набор в Fontello, IcoMoon или Fontastic и загрузите его в виде файла.zip.
2. В WordPress откройте экран пользовательских значков Elementor В Elementor 4 на главном экране Elementor есть ярлык к нему.
3. Нажмите "Добавить новый набор значков", загляните в файл.zip, назовите набор и опубликуйте его.
4. Откройте любое поле значков в редакторе Ваш набор отображается в разделе Мои библиотеки во всплывающем окне Библиотека значков.

Элементора свой Пользовательское руководство по значкам перечисляет шаги экспорта для каждой услуги, включая уникальный префикс CSS, необходимый каждому набору. загвоздка с этим маршрутом - это обслуживание: вы создаете или покупаете набор первым и загружаете его снова каждый раз, когда он меняется.

Подключите шрифт Awesome Pro

Элементор Про также подключает подписку Font Awesome Pro. Перейдите в Элементор > Настройки > Интеграции, вставьте свой идентификатор набора Font Awesome Pro и нажмите "Проверить идентификатор набора". Затем семейства Pro отображаются в подборщике рядом со стандартными наборами Font Awesome.

Способ 3: Добавьте 8 пакетов значков с помощью главных дополнений

The Библиотека значков Master Addons расширение добавляет восемь полных пакетов значков, всего 5344 значка, во всплывающее окно Библиотеки значков. Ничего не загружается: вы включаете пакет, и его значки появляются в каждом поле значков на сайте.

Настройка занимает три шага:

1. Перейдите в "Мастер-дополнения" > "Настройки" > "Расширения", нажмите фильтр "Библиотека значков", включите нужные пакеты и нажмите "Сохранить изменения".

2. Откройте любое поле значков в Elementor и нажмите Библиотека значков Новые пакеты находятся под Мои библиотеки, каждая с маленьким значком “M”.
3. Щелкните пакет, чтобы просмотреть его, или введите "Фильтр по имени", чтобы выполнить поиск в каждом пакете одновременно. Выберите значок и нажмите "Вставить".

Собственный шрифт значков (eicons) Elementor не находится в средстве выбора по умолчанию. Master Addons добавляет все 398 eicons в качестве вкладки, что помогает, когда вам нужны значки, соответствующие интерфейсу Elementor.Feather Icons, Remix Icon и Teenyicons поставляются с Мастер Аддоны Про.

Используйте значок Remix для открытых и закрытых состояний

Большинство форм значков ремиксов поставляются в линейной версии и версии для заполнения. Это делает его хорошим совпадением для виджетов с двумя состояниями значков: в Расширенный виджет Accordion, или Собственные Аккордеон и Переключить Элементора, задают контур как закрытый значок, а заполненную форму как открытый значок.

Подробности настройки, префикс класса CSS для каждого пакета и исправления распространенных проблем приведены в разделе Документы настроек библиотеки значков.

Какой метод следует использовать?

Правильный метод зависит от того, что у вас уже есть.

Последний ряд предназначен для людей, которые создают свои собственные виджеты.The Управление значками в конструкторе виджетов открывает то же всплывающее окно, поэтому пользовательские виджеты могут использовать каждый включенный пакет.

Как стилизовать значки в Elementor

Значки из всех этих источников используют элементы управления обычным стилем виджета Откройте вкладку Стиль, разверните раздел Значок и установите основной цвет, размер и вращение Переключитесь на вкладку Наведение, чтобы изменить цвет, когда посетитель указывает на значок.

Значки шрифтов принимают любой цвет, который вы установили. Это охватывает наборы шрифтов Awesome, пользовательских значков и пакеты главных надстроек. загруженный SVG меняет цвет только в том случае, если его пути не содержат собственной фиксированной заливки, поэтому удаляйте жестко закодированные значения заполнения из файла перед его загрузкой.

Те же элементы управления отображаются и в других виджетах значков. The Виджет информационного ящика объединяет значок с заголовком и текстом, а также наше руководство анимированные кнопки в Elementor показывает, как поместить значок внутри кнопки и придать ему собственный цвет зависания.

Устранение неполадок значков Elementor

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

Значки отображаются как пустые квадраты

Шрифт значка не загружается. очистите кэш Elementor под Elementor > Tools > General (Clear Files & Data), затем очистите плагин кэширования и CDN. Если ваши шрифты загружаются из CDN на другом домене, проверьте, разрешены ли запросы на файлы шрифтов из разных источников.

"Элементор" не примет мой СВГ

Включите Включить Нефильтрованные Загрузки Файлов в разделе Элементор > Настройки > Дополнительно, затем попробуйте загрузить ещё раз. Если всё ещё не удалось, откройте SVG в текстовом редакторе и проверьте, что это реальный SVG-файл, а не PNG с расширением.svg.

В сборщике отсутствует пакет Master Addons

Проверьте, что переключатель пакета включен в разделе Основные дополнения > Настройки > Расширения > Библиотека значков и что вы нажали Сохранить изменения, затем перезагрузите редактор Значки перьев, Значок ремикса и Teenyicons также нуждаются в Master Addons Pro с активной лицензией.

Шрифты значков замедляют страницу

Каждый шрифт значка - это еще один файл для загрузки браузером. Придерживайтесь одного или двух пакетов для единообразного внешнего вида и прочитайте наше руководство ускорение веб-сайтов Elementor, который охватывает опцию Inline Font Icons от Elementor для рендеринга значков как SVG вместо файлов шрифтов.

Часто задаваемые вопросы

Заключительные мысли

Добавление пользовательских значков в Elementor сводится к тому, где начинаются ваши значки. один SVG идет прямо в поле значков. шрифт значка бренда проходит через пользовательские значки Elementor Pro, рядом с Font Awesome Pro, если у вас есть комплект. И если вы предпочитаете брать, чем загружать, восемь пакетов Master Addons помещают еще 5344 значка в то же всплывающее окно.

Чтобы увидеть каждый пакет с образцами и значками, прежде чем что-либо включать, просмотрите Библиотека значков Elementor страница.

Связанное чтение

• Настройки библиотеки значков: коммутаторы, префиксы CSS и устранение неполадок для всех восьми пакетов
• Управление значками в Widget Builder: используйте пакеты в своих собственных виджетах
• Как добавить значок "Потрясающий шрифт" к кнопке отправки контактной формы 7
• Все виджеты и расширения Master Addgets