Мастер Аддоны
Цены
Посмотреть категории

Иконки

Рой Джеми
Обновлено 17 сентября 2026 г

5 мин чтения

Поле "Иконки" добавляет пикер значков Elementor в пользовательский виджет, созданный с помощью главных аддонов Виджет Строитель. Редакторы выбирают значок из библиотеки значков или загружают свой собственный SVG, и ваш шаблон печатает его. Используйте его для списков функций, информационных полей, кнопок, социальных ссылок и в любом другом месте, где поможет небольшой символ.

Значки - это поле Pro. бесплатный плагин включает ограниченный конструктор виджетов, и полный набор полей поставляется с Мастер Аддоны Про.

Три карты функций, созданные с помощью поля значков конструктора виджетов с использованием значка Elementor, загруженного SVG и значка Simple Line

Что делает поле Значки #

  • Добавляет на панель вашего виджета в Elementor иконку с кнопками для Библиотеки значков и для загрузки SVG.
  • Библиотека значков включает в себя Font Awesome и дополнительные наборы значков, которые поставляются с главными дополнениями, такими как значки Elementor, значки простых строк, линейные значки и значки материалов.
  • На поле хранятся две вещи: value (класс CSS значка или файл SVG для загрузки) и library (который установил, что оно пришло).
  • Ваш шаблон печатает <i> тег для значков библиотеки и <img> тег для загруженных SVG.

Если вы еще не создали виджет, прочтите Обзор виджета-строителя первый.

Прежде чем начать #

  • WordPress с установленным и активным элементом Elementor.
  • Мастер-аддоны для Elementor и Master Addons Pro, оба активные. The руководство установки настройка обложек.
  • Виджет, открытый в конструкторе виджетов Пример в этом руководстве - виджет “Feature List”: поле Значки с именем feature_icon и текстовое поле для заголовка.

Как добавить поле Значки #

  1. Перейти к Мастер-аддоны > Виджет-строитель и откройте виджет.
  2. На Содержание вкладка, добавить раздел, например “Feature”.
  3. Тип icons в поле поиска слева.
  4. Драг Иконки в раздел Его настройки открываются в левой боковой панели.
Поле значков найдено при поиске значков в поле "Строитель виджетов главных дополнений" с значком функции и заголовком в разделе "Контент"

Объяснены параметры поля значков #

Параметры поля значков с меткой, именем, описанием, кожей и значением по умолчанию, установленным на значок проверки Elementor
  • Этикетка является ли текст над иконкой в Elementor, например “Feature Icon”.
  • Имя является ли уникальный идентификатор поля и начало его жетонов, так что feature_icon дает {{ feature_icon.value }}. Только буквы, цифры и подчеркивания.
  • Описание появляется под контролем в Elementor.
  • Кожа предлагает Inline и Media.Это меняет то, как собственный предварительный просмотр строителя рисует поле. в наших тестах Elementor показал большой значок в любом случае.
  • Значение по умолчанию является ли значок, с которого начинается новая копия виджета. Нажмите Изменить значок чтобы выбрать один или маленький крестик, чтобы очистить его. Поле не установлено по умолчанию, начинается со значка логотипа Elementor.

Изменить значок открывает Мастер надстроек Выбор значков Выберите набор слева, поиск по имени, щелкните значок и затем Вставить.

Мастер дополнений Выбор значков, используемый для поля значков Значение по умолчанию с выбранным значком "Проверить"

Распечатайте значок в своем шаблоне #

{{ feature_icon }} на своих собственных отпечатках ничего, потому что поле держит два значения. используйте его части вместо:

  • {{ feature_icon.value }} является классом значков для значка библиотеки, например eicon eicon-check. Для загруженного SVG он печатает URL-адрес файла.
  • {{ feature_icon.library }} является именем набора, например eicons, simple-line-icons или svg для загрузки.
  • {{ feature_icon.value.url }} является ли URL-адрес SVG, когда библиотека есть svg.

Редакторы могут выбрать любой вид, поэтому проверьте библиотеку и распечатайте правильный тег. Заверните все это в проверку на пустое значение, чтобы ничто не печатало при удалении значка:

{% if feature_icon.value %}
  <span class="feature-icon">
    {% if feature_icon.library == 'svg' %}
      <img src="{{ feature_icon.value.url }}" alt="">
    {% else %}
      <i class="{{ feature_icon.value }}" aria-hidden="true"></i>
    {% endif %}
  </span>
{% endif %}
Виджет HTML, который проверяет feature_icon.library на наличие svg и печатает тег img или тег i

Значки библиотеки - это глифы шрифта, поэтому они берут color и font-size из элемента вокруг них. Загруженный SVG в <img> тег сохраняет свои цвета, поэтому размер его составляет width и height во вкладке CSS.

Нажмите Сохранить настройки когда закончишь.

Используйте элемент управления значками в Elementor #

Добавить виджет на страницу, или перезагрузить редактор, если страница уже была открыта, В поле значок отображается текущий значок Наведите на него курсор, чтобы увидеть Библиотека значков и Загрузить SVG, и значок корзины для удаления значка.

Управление значками в Elementor, показывающее загруженный SVG с кнопками "Библиотека значков" и "Загрузить SVG"

Библиотека значков открывает окно значка Элементора Выберите набор слева, отфильтруйте по имени, щелкните значок и щелкните Вставить. Загрузить SVG открывает медиатеку, чтобы вы могли загрузить или выбрать файл SVG. Elementor может попросить вас разрешить загрузку SVG с первого раза.

Список окон библиотеки значков Elementor. Библиотеки значков шрифта Awesome и Master Addons

Шрифт Потрясающие значки и значки встроенных шрифтов #

На нашем тестовом сайте на опубликованной странице отображались значки Elementor, значки Simple Line и загруженные SVG, а значок Font Awesome - нет. Элементора Значки встроенных шрифтов функция включена по умолчанию и не позволяет загружать таблицу стилей Font Awesome, поэтому <i> тег из виджета остается пустым Перейти к Элементор > Настройки > Особенностиустановите значки встроенных шрифтов в Неактивный и сохранить. Затем появился значок "Шрифт потрясающий". Если вы предпочитаете сохранить эту функцию включенной, используйте другие наборы значков или загрузку SVG.

Обычные случаи использования #

  • Списки функций и информационные поля со значком рядом с каждым заголовком.
  • Кнопки с ведущим или задним значком.
  • Социальные ссылки, контактные данные и список пуль.
  • Маркирует бренд, загружая логотип в виде SVG.

Советы по работе с полем Иконки #

  • Всегда обрабатывайте оба случая в шаблоне: <i> для значков библиотеки и <img> для загрузки SVG.
  • Охрана с {% if feature_icon.value %} так что пустая икона пустой обертки позади не оставляет.
  • Установите значение по умолчанию, подходящее для виджета, чтобы он никогда не показывал логотип Elementor случайно.
  • Стиль обертки, а не тега значка, поэтому оба типа значков находятся в одном поле.
  • Прежде чем полагаться на него, проверьте выбор "Шрифт потрясающий" на странице в реальном времени (см. раздел выше).
  • Для изображений, а не значков, используйте Медиаполе.

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

Поле Icons свободно?

Нет. Значки - одно из полей Pro в конструкторе виджетов, поэтому Master Addons Pro должен быть активен, прежде чем вы сможете добавить его в виджет.

Почему {{feature_icon}} ничего не печатает?

Поле содержит значение и библиотеку, поэтому токену самостоятельно нечего распечатать. использовать {{ feature_icon.value }} для класса значков и {{ feature_icon.value.url }} для загруженного SVG.

Почему на странице пуст значок "Шрифт потрясающий"?

Вероятно, включена функция "Иконки встроенного шрифта" Elementor, которая останавливает загрузку таблицы стилей "Потрясающий шрифт". Установите ее на "Неактивный" в Elementor, "Настройки", "Особенности" или выберите значок из другого набора.

Могут ли редакторы загружать свои собственные значки SVG?

Да. Наведите курсор на поле значка в Elementor и нажмите "Загрузить SVG". Вашему шаблону необходимо {% if feature_icon.library == 'svg' %} ветвь, чтобы распечатать его как изображение.

Могу ли я изменить цвет загруженного SVG с помощью CSS?

Не тогда, когда это напечатано в <img> тег, который сохраняет собственные цвета файла. иконки библиотеки следуют за color элемента вокруг них.

Завершая #

Добавьте поле Значки, установите значок по умолчанию и распечатайте его с помощью шаблона, который обрабатывает как значки библиотеки, так и загрузки SVG. Проверьте потрясающие элементы шрифта на опубликованной странице и отключите значки встроенных шрифтов, если они выходят пустыми. Чтобы узнать о других полях вкладки "Контент", см. URL и Выбирать поля и проверка ценообразование за то, что включает каждый план.

Какие у вас чувства