Как создать адаптивный шрифт иконок в WordPress с поддержкой SVG

Автор: Маргарита Журавлева | Опубликовано: 25.12.2025

Адаптивные иконки — важный элемент современного дизайна сайтов. В отличие от растровых изображений, шрифтовые иконки (icon fonts) легко масштабируются и хорошо выглядят на любых устройствах. Однако классические шрифты иконок не всегда поддерживают цвет и сложную графику, а растровые SVG-иконки требуют отдельной загрузки и настройки. В этой статье мы подробно разберём, как собрать собственный адаптивный шрифт иконок в WordPress с поддержкой SVG, который позволит использовать цветные иконки, улучшит производительность и упростит дальнейшее управление.

Почему стоит создавать собственный шрифт иконок с SVG

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

Создавая собственный SVG-шрифт, мы объединяем преимущества обоих форматов: масштабируемость, возможность менять цвет через CSS, а также уменьшение количества запросов за счёт объединения иконок в один файл.

Для WordPress это значит улучшение скорости загрузки, повышение гибкости дизайна и удобство управления иконками через CSS и JavaScript.

Выбор инструментов для создания SVG шрифта

Существует несколько инструментов для создания иконок в формате шрифта с поддержкой SVG:

IcoMoon — популярный онлайн-сервис для генерации кастомных шрифтов и SVG-спрайтов. Позволяет конвертировать SVG в шрифт, настраивать коды символов и экспортировать CSS.
Fontello — ещё один онлайн-генератор шрифтов иконок с поддержкой SVG. Удобен для быстрого создания набора иконок.
Glyphter — сервис, позволяющий «нарисовать» иконку прямо на сетке и сгенерировать шрифт.

Для автоматизации процесса в WordPress можно использовать плагин Clearfy Pro, который помогает оптимизировать загрузку и управление шрифтами и SVG.

Подготовка SVG-иконок для шрифта

Перед созданием шрифта важно правильно подготовить SVG-файлы:

Удалите лишние атрибуты и метаданные, чтобы уменьшить размер.
Убедитесь, что все иконки имеют одинаковый размер viewport (например, 24x24 или 32x32 px).
Используйте простые контуры без вложенных групп и сложных эффектов.
Назовите файлы иконок понятно, чтобы потом легко ориентироваться.

Для оптимизации SVG используйте бесплатные инструменты, например, SVGOMG.

Создание шрифта иконок с помощью IcoMoon

Рассмотрим пошагово создание шрифта:

Перейдите на https://icomoon.io/app/.
Нажмите "Import Icons" и загрузите подготовленные SVG-файлы.
Выберите все загруженные иконки и нажмите "Generate Font".
Настройте имена символов и коды, если нужно.
Скачайте архив с готовым шрифтом и CSS.

В архиве будет папка с файлами шрифта (woff, ttf, svg) и CSS с классами для подключаемых иконок.

Подключение шрифта иконок в WordPress

Чтобы подключить созданный шрифт к вашему сайту, загрузите файлы шрифта в папку темы или плагина, например, wp-content/themes/your-theme/fonts/.

В файл стилей вашей темы (style.css) добавьте следующий код (с учётом пути к файлам):

@font-face {
  font-family: 'wpiconsru-icons';
  src: url('fonts/wpiconsru-icons.woff2') format('woff2'),
       url('fonts/wpiconsru-icons.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: 'wpiconsru-icons' !important;
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* Опционально: цвет и размер */
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  vertical-align: middle;
}

Далее, в HTML используйте классы из CSS, например:

<i class="icon-home"></i> Главная

Где icon-home — имя иконки из CSS.

Добавление поддержки цветных SVG-иконок через CSS

Чтобы использовать цвет в иконках, можно применить несколько приёмов:

Использовать CSS-свойство mask-image вместе с фоном. Это позволяет менять цвет иконки через background-color.
Встраивать SVG прямо в CSS с помощью background-image: url('data:image/svg+xml,...'), но это сложнее для шрифтов.
Использовать современные браузерные возможности — например, SVG-фильтры — для изменения цвета.

Ниже пример использования CSS-маски для цветной иконки:

.icon-home {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: #0073aa;
  -webkit-mask-image: url('icons/home.svg');
  mask-image: url('icons/home.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

Такой подход позволяет динамически менять цвет иконки через CSS без дополнительных изображений.

Пример кастомной функции WordPress для вставки SVG-иконок

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

function wpiconsru_get_svg_icon($icon_name, $class = '') {
  $svg_path = get_template_directory() . '/icons/' . $icon_name . '.svg';
  if (file_exists($svg_path)) {
    $svg = file_get_contents($svg_path);
    if ($class) {
      $svg = str_replace('<svg ', '<svg class="' . esc_attr($class) . '" ', $svg);
    }
    return $svg;
  }
  return '';
}

// Использование в шаблоне:
// echo wpiconsru_get_svg_icon('home', 'custom-icon-class');

Эта функция подгружает SVG по имени из папки темы и добавляет CSS-класс для стилизации.

Оптимизация загрузки иконок в WordPress

Чтобы не грузить все иконки сразу, лучше использовать:

SVG-спрайты с динамической подгрузкой нужных символов.
Кэширование и сжатие файлов шрифта и CSS.
Загрузку шрифта через wp_enqueue_style и wp_enqueue_script в WordPress с правильными зависимостями и версиями.

Пример подключения шрифта в functions.php:

function wpiconsru_enqueue_icon_font() {
  wp_enqueue_style('wpiconsru-icons', get_template_directory_uri() . '/fonts/wpiconsru-icons.css', array(), '1.0.0');
}
add_action('wp_enqueue_scripts', 'wpiconsru_enqueue_icon_font');

Заключение

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

Для дополнительной оптимизации советуем обратить внимание на плагин Clearfy Pro, который поможет автоматизировать оптимизацию загрузки и управление ресурсами.