Иконки

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

Как и в каждом поле Widget Builder, управление значками поддерживает Условия, полезен для показа сборщика только когда включен переключатель “enable icon”, и его выходные данные отображаются через Механизм шаблонов Twig-синтаксиса. Оба руководства охватывают детали и ограничения.

Значение представляет собой массив с двумя ключами, value и library. Эта форма имеет последствия, которые стоит изложить заранее: печать поля напрямую {{ my_icon }} выводит вообще ничего. значки шрифтов и загруженные SVG также отображаются через разметку, поэтому шаблону нужна короткая ветвь. Оба шаблона находятся ниже, готовы к вставке.

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

• Открывает сборщик иконок Элементора с помощью Font Awesome, пользовательских библиотек и загрузки SVG.
• Хранит медиатор в виде массива оф value и library.
• Держит строку класса для значков шрифта: value класс иконы готов к <i> тег.
• Держит вложенный массив файлов для SVG: value становится парой URL и ID, достигаемой как {{ my_icon.value.url }}.
• Принимает список по умолчанию и рекомендуемый список, так что сборщик может всплыть значки, которые подходят для виджета.

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

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

• WordPress с Элементор установлен и активен.
• Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
• Пользовательский виджет, открытый в редакторе Widget Builder Наш пример - виджет списка функций, где каждый экземпляр показывает один значок, названный feature_icon, рядом с коротким текстовым аннотацией.

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

Найдите Иконки поле на панели слева редактора Widget Builder, сгруппированное с другими медиаполями.

Перетащите его в раздел под Содержание вкладка После приземления слева открываются варианты поля.

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

• Этикетка: текст, показанный над сборщиком в Elementor, например “Feature Icon”.
• Имя: уникальный идентификатор поля, букв, цифр и подчеркиваний только, например feature_icon.
• По умолчанию: стартовый значок в качестве value и library пара, поэтому виджет никогда не опускается без значков.
• Рекомендуется: набор значков, которые сборщик сначала всплывает на поверхность, направляя редакторов к выбору, соответствующему дизайну.
• Описание, Показать метку, Разделитель: стандартные настройки отображения, плюс Условия показа поля только тогда, когда другое управление имеет определенное значение.

Подключите поле "Иконки" к шаблону #

Во-первых, ошибка, которую совершают почти все один раз: {{ feature_icon }} ничего не печатает. Ярлык прямого вывода на значения массива выводит только верхний уровень url ключ, и массив Значки не имеет, поэтому токен выходит пустым.Никакой ошибки, никакого предупреждения, просто пустое место, где должен быть значок. свойства - это то, где живет контент.

Значок шрифта (Font Awesome и другие библиотеки, основанные на классах): value держит строку класса, поэтому a <i> тег отображает это:

<i class="{{ feature_icon.value }}" aria-hidden="true"></i>

Загруженный SVG: когда выбор поступает из библиотеки SVG, value сам по себе является массивом с URL и ID, поэтому значок отображается как изображение:

<img src="{{ feature_icon.value.url }}" alt="">

Виджет редко знает заранее, какой тип выберет редактор, поэтому надежный шаблон разветвляется на library ключ и ручки оба:

{% if feature_icon.library == 'svg' %}
  <img src="{{ feature_icon.value.url }}" alt="">
{% else %}
  <i class="{{ feature_icon.value }}"></i>
{% endif %}

Заверните все это в пустое защитное устройство, как и любое поле медиатипа, чтобы незаданный значок не оставлял блуждающих элементов <i class=""> сзади:

{% if feature_icon.value %}
  ...the branch above...
{% endif %}

Остерегайтесь тестирования только с помощью значков шрифтов. The <i>-версия тегов работает всю неделю, затем клиент загружает бренд SVG, и значок исчезает, потому что атрибут класса не может удерживать массив файлов. Если вы отправляете поле, отправьте ветку.

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

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

Щелкните его, и откроется библиотека значков. Найдите шрифт Awesome, просмотрите любые пользовательские библиотеки или переключитесь на вкладку загрузки для SVG. Подтвердите выбор и обновления предварительного просмотра, проходящие через любую ветвь вашего шаблона, соответствующую библиотеке.

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

• Списки функций и преимуществ с одним символом на очко.
• Информационные и значки где иконка закрепляет тему карты.
• Строки социальных ссылок, каждый экземпляр связывает значок с полем URL.
• Кнопки и призывы к действию на нем есть небольшой ведущий значок.
• Шаг и обработка виджетов где каждый пронумерованный этап получает соответствующий символ.

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

• Никогда не печатайте поле голым. {{ feature_icon }} ничего не выводит; значок живет в {{ feature_icon.value }} и для SVG, {{ feature_icon.value.url }}.
• Отправить филиал библиотеки. The {% if feature_icon.library == 'svg' %} шаблон - единственная версия, которая сохранилась после каждого выбора редактора.
• Охранять пустое государство. {% if feature_icon.value %} не позволяет удаленным значкам отображать пустые теги.
• Добавить aria-hidden="true" на иконки декоративных шрифтов. Считыватели экрана пропускают символ и вместо этого читают текст рядом с ним.
• Используйте Рекомендуется для направления выбора. Накрытие кураторного набора сохраняет визуальное соответствие значков виджета по сайту.
• Размер SVG на вкладке CSS. Загруженные SVG поступают в виде изображений, поэтому дайте ветви img ширину, чтобы обе ветви рендеринга оставались в одном масштабе.

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

Завершая #

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