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

Опубликовано автором

Dashicons — это шрифт официальных значков в админке WordPress с версии 3.8.

Dashicons распространяется под лицензией GPLv2 или любой более поздней версии за исключением шрифтов.

Admin Menu

menu
menu (alt)
menu (alt2)
menu (alt3)
site
site (alt)
site (alt2)
site (alt3)
dashboard
post
media
links
page
comments
appearance
plugins
plugins checked
users
tools
settings
network
home
generic
collapse
filter
customizer
multisite

Welcome Screen

write blog
add page
view site
widgets and menus
comments
learn more

Post Formats

aside
image
gallery
video
status
quote
chat
audio
camera
camera (alt)
images (alt)
images (alt 2)
video (alt)
video (alt 2)
video (alt 3)

Media

archive
audio
code
default
document
interactive
spreadsheet
text
video
audio playlist
video playlist
play player
player pause
player forward
player skip forward
player back
player skip back
player repeat
player volume on
player volume off

Image Editing

crop
rotate
rotate left
rotate right
flip vertical
flip horizontal
filter
undo
redo

Databases

database add
database
database export
database import
database remove
database view

Block Editor

align full width
align pull left
align pull right
align wide
block default
button
cloud saved
cloud upload
columns
cover image
ellipsis
embed audio
embed generic
embed photo
embed post
embed video
exit
heading
html
info outline
insert
insert after
insert before
remove
saved
shortcode
table col after
table col before
table col delete
table row after
table row before
table row delete

TinyMCE

bold
italic
ul
ol
ol rtl
quote
alignleft
aligncenter
alignright
insertmore
spellcheck
expand
contract
kitchen sink
underline
justify
textcolor
paste
paste
remove formatting
video
custom character
outdent
indent
help
strikethrough
unlink
rtl
ltr
break
code
paragraph
table

Posts Screen

align left
align right
align center
align none
lock
unlock
calendar
calendar
visibility
hidden
post status
edit pencil
trash remove delete
sticky

Sorting

external
arrow-up
arrow-down
arrow-right
arrow-left
arrow-up
arrow-down
arrow-right
arrow-left
arrow-up
arrow-down
arrow-right
arrow-left
sort
left right
randomize shuffle
list view
excerpt view
grid view
move

Social

share
share
share
rss
email
email (alt)
email (alt2)
networking social
amazon
facebook social
facebook social
google social
instagram social
linkedin social
pinterest social
podio
reddit social
spotify social
twitch social
twitter social
twitter social
whatsapp social
xing
youtube social

WordPress.org Specific: Jobs, Profiles, WordCamps

hammer development
art design
migrate migration
performance
universal access accessibility
universal access accessibility
tickets
nametag
clipboard
heart
megaphone
schedule
Tide
REST API
code standards

Buddicons

activity
community
forums
friends
groups
private message
replies
topics
tracking

Products

WordPress
WordPress
press this
update
update (alt)
screenoptions
info
cart shopping
feedback form
cloud
translation language

Taxonomies

tag
category

Widgets

archive
tagcloud
text

Notifications

bell
yes check checkmark
yes check checkmark (alt)
no x
no x
plus add increase
plus add increase
plus add increase
minus decrease
dismiss
marker
filled star
half star
empty star
flag
warning

Misc

location pin
location
vault safe
shield
shield
sos help
search
slides
text page
analytics
pie chart
bar chart
line chart
area chart
groups
businessman
businesswoman
businessperson
id
id
products
awards
forms
testimonial
portfolio
book
book
download
upload
backup
clock
lightbulb
microphone mic
desktop monitor
laptop
tablet ipad
smartphone iphone
phone
index card
carrot food vendor
building
store
album
palm tree
tickets (alt)
money
money alt
smiley smile
thumbs up
thumbs down
layout
paperclip
color picker
edit large
edit page
airplane
bank
beer
calculator
car
coffee
drumstick
food
fullscreen alt
fullscreen exit alt
games
hourglass
open folder
pdf
pets
printer
privacy
superhero
superhero

Использование в 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>
);

Источник: https://developer.wordpress.org/resource/dashicons/