Стандартная панель администратора WordPress выглядит опрятно, но стоит зарегистрировать пару кастомных типов записей, и меню превращается в мешанину из одинаковых дефолтных иконок. «Записи», «Страницы», ваш «Портфолио», «Отзывы», все с одной и той же пиктограммой-булавкой. Глаз цепляется, клиент путается, админка теряет вид.

Можно установить плагин для кастомных иконок. Можно подключить Font Awesome и грузить 2000+ иконок ради пяти. А можно не делать ни того, ни другого, потому что WordPress с версии 3.8 поставляется со встроенным иконочным шрифтом Dashicons. Никаких дополнительных зависимостей, никакого лишнего CSS. Всё уже на вашем сервере.

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

💡 Быстрый обзор:

• Регистрируете кастомный тип записи, задаёте аргумент menu_icon с CSS-классом Dashicon, и иконка появляется в админке без единого плагина.
• Подключаете wp_enqueue_style('dashicons') во фронтенд, и вставляете иконки через HTML-тег <span> в любом месте темы.
• Создаёте шорткод [dashicon icon="..."], и клиент добавляет иконки в контент без возни с кодом.

Что такое Dashicons и зачем они нужны

Dashicons, это официальный иконочный шрифт административной панели WordPress. Он появился в версии 3.8 вместе с масштабным редизайном админки и с тех пор используется для каждого пункта левого меню: «Записи», «Медиафайлы», «Плагины», «Настройки», всё это Dashicons.

Шрифт содержит около 300 иконок, покрывающих практически любую потребность: типы записей, медиа, социальные сети, редактор, уведомления, таксономии, виджеты. Полный каталог с поиском доступен на странице Dashicons в WordPress Developer Resources.

Главное преимущество перед тем же Font Awesome, нулевая стоимость подключения. Dashicons уже загружен в админке, а для фронтенда добавляется одной строкой в functions.php. Вы не тащите на сайт библиотеку из 2000+ иконок, 90% которых никогда не понадобятся. Если же нужен кастомный набор, присмотритесь к Fontello, где можно собрать стиль-лист только из выбранных значков.

Важный нюанс: проект Dashicons больше не принимает запросы на новые иконки с июня 2023 года. Существующий набор заморожен, но для типовых задач WordPress его по-прежнему хватает с запасом.

Способ 1: Иконка для кастомного типа записи

Самый частый сценарий, вы регистрируете новый тип записи через register_post_type и хотите, чтобы в админке рядом с его названием была осмысленная иконка, а не дефолтная «булавка».

Делается это аргументом menu_icon:

1
/**
2
 * Регистрирует кастомный тип записи «Портфолио» с иконкой Dashicons.
3
 * Код вставляется в functions.php темы или дочерней темы.
4
 */
5
function sd_register_portfolio_post_type() {
6
    register_post_type( 'portfolio', array(
7
        'public'      => true,
8
        'label'       => __( 'Портфолио', 'textdomain' ),
9
        'menu_icon'   => 'dashicons-portfolio',
10
        'has_archive' => true,
11
        'supports'    => array( 'title', 'editor', 'thumbnail' ),
12
    ) );
13
}
14
add_action( 'init', 'sd_register_portfolio_post_type', 0 );

Значение menu_icon, это CSS-класс иконки. Зайдите на страницу Dashicons, кликните по нужной иконке и скопируйте её класс из всплывающей подсказки. Достаточно подставить dashicons-{slug}, и WordPress сам отрендерит иконку в левом меню.

До появления Dashicons приходилось указывать прямой URL изображения для menu_icon. На сайте с десятком плагинов иконки скакали по стилям, и админка выглядела неряшливо. Сейчас все значки типов записей наследуют единый стиль интерфейса WordPress, аккуратно и без лишних телодвижений.

Этот же подход работает для страниц, добавленных через add_menu_page:

1
add_menu_page(
2
    __( 'Мои отчёты', 'textdomain' ),
3
    __( 'Отчёты', 'textdomain' ),
4
    'manage_options',
5
    'my-reports',
6
    'sd_render_reports_page',
7
    'dashicons-chart-area',
8
    25
9
);

Пятым параметром после callback-функции передаётся класс Dashicon, и новый пункт меню получает иконку из того же семейства, что и все стандартные.

Способ 2: Dashicons во фронтенде темы

Иконки нужны не только в админке. Мета-данные поста (дата, категория, автор), кнопка поиска в шапке, иконка корзины, типовые места, где значок делает интерфейс понятнее.

Чтобы включить Dashicons на внешней части сайта, добавьте в functions.php:

1
/**
2
 * Подключает стиль Dashicons на фронтенд.
3
 * Код — в functions.php дочерней темы.
4
 */
5
add_action( 'wp_enqueue_scripts', function() {
6
    wp_enqueue_style( 'dashicons' );
7
} );

Теперь можно вставлять иконку через HTML в любом шаблоне темы:

1
<span class="dashicons dashicons-calendar"></span>

Меняете calendar на slug нужной иконки, и она отображается. HTML-код работает в любом месте темы: header.php, footer.php, single.php, даже прямо в поле «Название» пункта меню (WordPress пропускает HTML в навигационных метках).

Для группировки с текстом используйте вспомогательный класс dashicons-before, он добавляет иконку перед содержимым элемента без дополнительной разметки:

1
<h2 class="dashicons-before dashicons-smiley">Приветственный заголовок</h2>

Способ 3: Шорткод для вставки иконок в контент

Если вы делаете сайт для клиента, который не дружит с HTML, дайте ему шорткод. Один раз добавляете код в functions.php, и клиент вставляет иконку в любой записи через [dashicon icon="..."].

1
/**
2
 * Регистрирует шорткод [dashicon icon="..."] для вставки Dashicons в контент.
3
 * Требует предварительного подключения dashicons через wp_enqueue_style (Способ 2).
4
 * Код — в functions.php темы или в отдельном подключаемом файле.
5
 */
6
add_shortcode( 'dashicon', function( $atts ) {
7
    $atts = shortcode_atts( array(
8
        'icon' => 'menu',
9
    ), $atts, 'dashicon' );
10
 
11
    if ( ! empty( $atts['icon'] ) ) {
12
        return sprintf(
13
            '<span class="dashicons dashicons-%s"></span>',
14
            esc_attr( $atts['icon'] )
15
        );
16
    }
17
 
18
    return '';
19
} );

Использование в редакторе:

1
[dashicon icon="chart-pie"]

Шорткод предполагает, что вы уже подключили стиль Dashicons во фронтенд (Способ 2). Если этого не сделать, иконка не отобразится. Альтернативно можно встроить wp_enqueue_style прямо в тело шорткода, тогда стиль подгрузится только при фактическом использовании иконки. Но у этого подхода есть нюанс: таблица стилей загрузится в подвале страницы, и иконки «мигнут» после рендеринга. Глобальное подключение надёжнее.

Бонус: Dashicons в блоках Gutenberg

Если вы разрабатываете кастомные блоки, Dashicons работают и там. При регистрации блока через registerBlockType укажите параметр icon с именем Dashicon:

1
registerBlockType( 'my-plugin/my-block', {
2
    apiVersion: 2,
3
    title:    'Мой блок',
4
    icon:     'dashicons-admin-site',
5
    category: 'design',
6
    edit()   {},
7
    save()   {},
8
} );

Для React-компонентов в админке доступен готовый компонент Dashicon из пакета @wordpress/components:

1
import { Dashicon } from '@wordpress/components';
2
 
3
const MyComponent = () => (
4
    <div>
5
        <Dashicon icon="admin-home" />
6
        <Dashicon icon="products" />
7
        <Dashicon icon="wordpress" />
8
    </div>
9
);

Это работает только в админке (редактор блоков, страницы настроек). Во фронтенд компонент Dashicon стили не тянет, там по-прежнему нужен wp_enqueue_style('dashicons').

⁉️🤔 Частые вопросы

Нужно ли устанавливать плагин для использования Dashicons?

Нет. Dashicons встроены в ядро WordPress с версии 3.8. Для админки они подключены по умолчанию. Для фронтенда достаточно одной строки wp_enqueue_style('dashicons') в functions.php.

Чем Dashicons лучше Font Awesome?

Размером и отсутствием внешней зависимости. Font Awesome содержит 2000+ иконок, большинство из которых вам не нужны. Dashicons, около 300, все заточены под WordPress, и стиль уже на сервере. Если иконка есть в каталоге Dashicons, берите её и не городите лишнее.

Какие иконки доступны в Dashicons?

Около 300: типы записей, медиа, социальные сети, редактор, уведомления, таксономии, виджеты, WordPress-специфичные (Products, Buddicons). Полный список с поиском на developer.wordpress.org/resource/dashicons.

Можно ли добавить свою иконку в Dashicons?

Нет. С июня 2023 года проект не принимает запросы на новые иконки. Если нужного значка нет в каталоге, используйте Font Awesome, Fontello или загрузите кастомное SVG.

Почему иконки не отображаются во фронтенде?

Скорее всего, вы забыли вызвать wp_enqueue_style('dashicons'). Проверьте functions.php: вызов должен быть прицеплен к хуку wp_enqueue_scripts. Ещё одна причина: тема или плагин отключает Dashicons через wp_dequeue_style.

Стоит ли использовать Dashicons в 2026 году

Короткий ответ: да, для админки и простых фронтенд-нужд. Dashicons, это нулевой оверхед, предсказуемый рендеринг и полная интеграция с интерфейсом WordPress. Для кастомных типов записей и пунктов меню в админке это по-прежнему стандарт де-факто.

Ограничения стоит понимать заранее: набор иконок заморожен, новые не добавляются. Если вы строите сайт с богатым визуальным оформлением, Font Awesome или кастомный SVG-спрайт дадут больше гибкости. Но для большинства типовых задач WordPress встроенного шрифта хватает с запасом, и тащить ради трёх иконок библиотеку на 2000+ символов не имеет смысла.

Быстрее всего добавить иконку для кастомного типа записи, скопируйте класс из каталога Dashicons и подставьте в menu_icon. Это займёт 30 секунд и не потребует ни одного плагина.

Если материал был полезен, посмотрите видеоинструкцию по использованию Dashicons в меню навигации: она на английском, но все шаги показаны на экране, разберётесь без перевода.