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

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

В этой статье мы рассмотрим несколько методов создания и добавления пользовательских значков в Elementor.

Оглавление

Что такое иконки WordPress?

Это может показаться немного странным, потому что значки есть значки, верно? Но не совсем, и формат фактически определяет, как они используются, ведут себя и могут быть добавлены на веб-сайт.

Существует три формата значков для веб-сайтов:

1. Иконочные шрифты (Font Awesome, Material Design и т. д.) на самом деле являются шрифтами, но вместо букв у вас символы. Это означает, что вы можете применить те же свойства, что и для любого другого шрифта: цвет, выравнивание текстаили размер шрифта свойство. Однако они не столь гибки (по сравнению с SVG), когда дело касается анимации.
2. SVG-иконки. SVG означает «масштабируемая векторная графика», что означает, что это самый легкий формат для любой графики. Скорее всего, ваш веб-дизайнер будет использовать этот формат в дизайне.
   Однако многие темы WordPress и Elementor по умолчанию не позволяют загружать SVG, поскольку из-за его специфического формата потенциально могут содержать вредоносные скрипты. Чтобы разрешить загрузку их в Elementor, перейдите по ссылке Elementor > Настройки > Дополнительно и установите флажок «Нефильтрованные загрузки». Если в вашей теме возникла эта проблема, либо снимите флажок с этого ограничения в настройках темы, либо установите плагин поддержки SVG. Просто убедитесь, что вы не загружаете SVG из неизвестных источников, и вы будете в безопасности.
3. PNG иконки. Они могут быть полезны только для сложной графики, поскольку PNG — это растровый формат, а это значит, что размер файла намного больше, чем SVG, и его нельзя масштабировать без потери качества. Поэтому не рекомендуется использовать значки PNG, если их можно заменить на SVG.

После всего сказанного есть два основных кандидата на роль источника значков на вашем веб-сайте: иконочные шрифты и изображения SVG. Так какой из них лучший?

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

SVG-иконки против иконочных шрифтов

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

Но давайте сравним их по нескольким показателям ниже.

Скорость

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

Доступность

В этой категории SVG — явные победители. Они поддерживают WAI благодаря своей графической природе и не могут быть спутаны программами чтения с экрана с обычными текстовыми шрифтами (в отличие от шрифтов значков).

Отображение и анимация

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

Итак, с этой точки зрения SVG лучше.

Но если вы хотите изменить цвет, вы можете сделать это только с помощью шрифтов или встроенных SVG (которые вы редко используете в реальной жизни в качестве значков).

Однако для большинства анимаций SVG лучше, потому что они могут использовать большее разнообразие анимаций.

📢 Значки SVG и шрифтов во многом взаимозаменяемы. В качестве значков в темах в основном используются иконочные шрифты, в частности Font Awesome. Я думаю, вы видели эту панель виджетов, которую предлагает Elementor, где «значки» на самом деле означают значки Font Awesome.

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

Говоря о производительности, Elementor недавно значительно улучшился, отображая Font Awesome в виде встроенных SVG-файлов. Чтобы активировать его, перейдите в Elementor > Настройки > Функции.

Добавление шрифтов значков в Elementor

Иконки веб-сайта обычно зависят от дизайна веб-сайта, поэтому не так уж много случаев, когда вам понадобится добавить более 500 различных значков. Однако требуются собственные значки, поскольку набор значков WordPress по умолчанию, Dashicons, ограничен и используется в основном для информационной панели. Остальное зависит от вашей темы и ваших собственных настроек.

Есть два основных способа добавить собственные значки в Elementor: с помощью Elementor Pro или стороннего плагина. Но прежде вам следует создать эти собственные значки. Это можно сделать с помощью самых популярных поставщиков иконочных шрифтов, таких как Fontello или IcoMoon.

Создание пользовательского шрифта

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

При желании вы можете редактировать их коды или имена на специальных вкладках. После этого нажмите кнопку «Загрузить веб-шрифт» Кнопка, и ваш собственный шрифт значка готов.

Добавление пользовательских значков с помощью Elementor Pro

Если вы пользователь Elementor Pro, это самый простой способ сделать это. Идти к Elementor > Пользовательские значки и загрузите только что созданный ZIP-файл. Вот и все; теперь они станут доступны в виджетах Elementor.

Использование плагина значков

Если вы предпочитаете бесплатную версию Elementor, бесплатный плагин Custom Icons for Elementor будет хорошим подспорьем, поскольку вы можете сделать то же самое, загрузив сгенерированный файл.

Добавление SVG-значков в Elementor

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

Альтернативно вы можете использовать встроенный виджет SVG, в котором можно менять цвет; он доступен вместе с множеством других интересных виджетов с плагином JetElements.

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

Еда на вынос

Большинству веб-сайтов нужны собственные значки, соответствующие уникальному дизайну конкретного проекта. Современные форматы значков — это SVG и иконочные шрифты; однако SVG более предпочтителен. Добавлять собственные значки в Elementor очень легко, используя функции Elementor Pro или бесплатный плагин.