Стандартна панель адміністратора 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 у меню навігації: вона англійською, але всі кроки показані на екрані, розберетеся без перекладу.