Как создать меню с иконками в WordPress без плагинов

Автор: Татьяна Тарасова | Опубликовано: 27.02.2026

Почему стоит создавать меню с иконками вручную

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

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

В этой статье мы рассмотрим, как добавить иконки к пунктам меню WordPress через функции темы и CSS, без плагинов.

Выбор типа иконок для меню

Рассмотрим три основных подхода для добавления иконок к меню:

Шрифты иконок — например, Font Awesome, Dashicons (встроенный в WordPress набор иконок). Преимущество — простая вставка и масштабируемость.
SVG-иконки — более современный и гибкий вариант, поддерживающий анимацию и высокое качество на любом экране.
Изображения PNG, JPG — традиционный способ, но менее адаптивный и часто требует оптимизации.

Для примеров возьмем шрифты Dashicons и собственные SVG-иконки.

Как добавить иконки к пунктам меню через CSS и классы

WordPress позволяет добавлять к пунктам меню свои CSS-классы, которые помогут нам привязать иконки.

В админке WordPress откройте Внешний вид > Меню.
В правом верхнем углу включите отображение Классы CSS в настройках экрана.
К каждому пункту меню добавьте уникальный класс, например, wpeducation-icon-home, wpeducation-icon-contact и т.д.

Далее в файле стилей темы (style.css) добавим стили для этих классов.

.menu-item.wpeducation-icon-home > a::before {
    font-family: 'Dashicons' !important;
    content: '\f102'; /* иконка домика */
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
}
.menu-item.wpeducation-icon-contact > a::before {
    font-family: 'Dashicons' !important;
    content: '\f466'; /* иконка телефона */
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
}

Обратите внимание, что в теме должен быть подключен Dashicons. Обычно он уже загружается в админке, но на фронтенде нужно добавить вручную:

function wpeducation_enqueue_dashicons() {
  wp_enqueue_style( 'dashicons' );
}
add_action( 'wp_enqueue_scripts', 'wpeducation_enqueue_dashicons' );

Таким образом, у пункта меню с классом wpeducation-icon-home появится иконка домика слева.

Добавление SVG-иконок к меню через фильтр `nav_menu_item_title`

Для более гибкого подхода можно добавлять SVG прямо в название пункта меню с помощью фильтра WordPress.

Добавьте следующий код в файл functions.php вашей темы:

function wpeducation_add_svg_icons_to_menu( $title, $item, $args, $depth ) {
    $icons = [
        'Home' => '<svg width="16" height="16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M8 3L2 9h2v4h4v-4h2L8 3z"/></svg>',
        'Contact' => '<svg width="16" height="16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="7" stroke="black" stroke-width="1" fill="none"/></svg>'
    ];

    if ( isset( $icons[$title] ) ) {
        $title = $icons[$title] . ' ' . $title;
    }
    return $title;
}
add_filter( 'nav_menu_item_title', 'wpeducation_add_svg_icons_to_menu', 10, 4 );

В массиве $icons ключ — название пункта меню, значение — SVG-код иконки. Вы можете добавить любые SVG по своему усмотрению.

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

Кастомизация и оптимизация меню с иконками

Для более удобной работы с меню и иконками советуем:

Использовать уникальные CSS-классы для каждого пункта для легкой стилизации.
Оптимизировать SVG, удаляя лишние атрибуты и уменьшая размер файлов.
Использовать aria-hidden="true" для иконок, если они декоративные, чтобы не мешать экранным читалкам.
Добавлять стили для адаптивности — например, скрывать иконки на мобильных или менять их размер.

Пример CSS для адаптивности:

@media (max-width: 600px) {
  .menu-item > a::before, .menu-item svg {
    display: none;
  }
}

Пример комплексного решения: меню с иконками и использованием WPCommunity

Если на сайте используется плагин WPCommunity для социальной сети, можно интегрировать иконки профилей пользователей в меню.

Для этого в functions.php можно добавить следующий код для вывода иконки рядом с пунктом «Профиль»:

function wpeducation_add_profile_icon_menu( $title, $item, $args, $depth ) {
    if ( $item->title === 'Профиль' && is_user_logged_in() ) {
        $user_id = get_current_user_id();
        $avatar = get_avatar( $user_id, 16 );
        $title = $avatar . ' ' . $title;
    }
    return $title;
}
add_filter( 'nav_menu_item_title', 'wpeducation_add_profile_icon_menu', 10, 4 );

Это повысит UX и сделает меню более информативным.

Выводы и рекомендации

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

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