Dashicons — стандартные иконки WordPress и как с ними работать

Dashicons — это набор встроенных иконок WordPress, изначально разработанных для административной панели. Но вы можете использовать их и на публичной части сайта. Они просты в использовании, не требуют установки сторонних библиотек и позволяют добавлять иконки в кнопки, меню, блоки контента и любой HTML.

Подключение Dashicons

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

<?php
function enqueue_dashicons() {
    wp_enqueue_style('dashicons');
}
add_action('wp_enqueue_scripts', 'enqueue_dashicons');
?>

Это подключает файл dashicons.css со всеми необходимыми стилями.

⚡ На админ-панели WordPress подключение не требуется — Dashicons уже загружены.

Использование Dashicons в HTML

Иконки отображаются через CSS-классы. Общий формат:

<span class="dashicons dashicons-имя-иконки"></span>

Например:

<span class="dashicons dashicons-admin-users"></span>
<span class="dashicons dashicons-email"></span>

Иконка выбирается по имени (dashicons-admin-users, dashicons-email и т.д.). Полный список имён можно найти на официальной странице: Dashicons – WordPress Developer Resources.

Примеры использования

В кнопке:

<button class="my-button">
    <span class="dashicons dashicons-plus"></span> Добавить элемент
</button>

В меню:

<li>
    <span class="dashicons dashicons-admin-home"></span>
    Главная
</li>

В шорткодах или блоках Gutenberg:

Если вы пишете шорткод, можно выводить иконку динамически:

echo '<span class="dashicons dashicons-star-filled"></span> Избранное';

Динамическая генерация списка Dashicons

Если вы хотите отобразить все иконки на странице, можно использовать шорткод, который динамически извлекает имена иконок из dashicons.css:

echo do_shortcode('[dashicons_dynamic]');

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

Советы по работе с Dashicons

Используйте только один тег <span> с классами dashicons dashicons-имя, не оборачивайте в лишние контейнеры.
Для изменения цвета и размера используйте CSS:

.dashicons {
    font-size: 24px;
    color: #0073aa;
}

Dashicons — шрифтовые иконки, поэтому они масштабируются без потери качества.

Заключение

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

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

Полный перечень иконок Dashicon в Wordpress

[dashicons_all]

Записки web-разработчика