Иконки в админке WordPress (Dashicons)

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

Пункты меню администратора могут быть добавлены с помощью register_post_type() and add_menu_page(), у обоих есть возможность установить иконку. Дл того, чтобы показать значек: 'dashicons-{icon}'.

Примеры

В register_post_type(), устоновить в menu_icon наименование иконки.

<?php
/**
 * Register the Product post type with a Dashicon.
 *
 * @see register_post_type()
 */
function wpdocs_create_post_type() {
    register_post_type( 'acme_product',
        array(
            'labels' => array(
                'name'          => __( 'Products', 'textdomain' ),
                'singular_name' => __( 'Product', 'textdomain' )
            ),
            'public'      => true,
            'has_archive' => true,
            'menu_icon'   => 'dashicons-products',
        )
    );
}
add_action( 'init', 'wpdocs_create_post_type', 0 );

Функция add_menu_page() принимает параметр после функции обратного вызова для URL-адреса значка, который также может принимать класс dashicons.

<?php
/**
 * Register a menu page with a Dashicon.
 *
 * @see add_menu_page()
 */
function wpdocs_add_my_custom_menu() {
    // Add an item to the menu.
    add_menu_page(
        __( 'My Page', 'textdomain' ),
        __( 'My Title', 'textdomain' ),
        'manage_options',
        'my-page',
        'my_admin_page_function',
        'dashicons-admin-media'
    );
}

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

<h2 class="dashicons-before dashicons-smiley">A Cheerful Headline</h2>

<h2><span class="dashicons dashicons-smiley"></span> A Cheerful Headline</h2>

Исполдьвание в блоке

registerBlockType( 'gutenberg-examples/example-01-basic-esnext', {
    apiVersion: 2,
    title: 'Example: Basic (esnext)',
    icon: 'universal-access-alt',
    category: 'design',
    example: {},
    edit() {},
    save() {},
} );

import { Dashicon } from '@wordpress/components';
 
const MyDashicon = () => (
    <div>
        <Dashicon icon="admin-home" />
        <Dashicon icon="products" />
        <Dashicon icon="wordpress" />
    </div>
);