Standardowy panel administracyjny WordPress wygląda schludnie, ale wystarczy zarejestrować kilka niestandardowych typów wpisów, a menu zamienia się w mieszaninę identycznych domyślnych ikon. „Wpisy", „Strony", Pana/Pani „Portfolio", „Opinie", wszystkie z tą samą ikoną pinezki. Oko się o to zahacza, klient się gubi, panel administracyjny traci swój wygląd.

Można zainstalować wtyczkę do niestandardowych ikon. Można podłączyć Font Awesome i ładować 2000+ ikon dla pięciu. Można też nie robić ani jednego, ani drugiego, ponieważ WordPress od wersji 3.8 jest dostarczany z wbudowaną czcionką ikon Dashicons. Żadnych dodatkowych zależności, żadnego zbędnego CSS. Wszystko jest już na Pana/Pani serwerze.

W tym poradniku rozłożymy na czynniki pierwsze, jak używać Dashicons dla niestandardowych typów wpisów, w warstwie front-end motywu oraz poprzez wygodny shortcode, z działającymi przykładami kodu, które można skopiować i wkleić od razu.

💡 Szybki przegląd:

• Rejestruje Pan/Pani niestandardowy typ wpisu, ustawia argument menu_icon z klasą CSS Dashicon i ikona pojawia się w panelu administracyjnym bez żadnej wtyczki.
• Podłącza Pan/Pani wp_enqueue_style('dashicons') w warstwie front-end i wstawia ikony za pomocą znacznika HTML <span> w dowolnym miejscu motywu.
• Tworzy Pan/Pani shortcode [dashicon icon="..."], a klient dodaje ikony do treści bez problemów z kodem.

Czym są Dashicons i do czego służą

Dashicons to oficjalna czcionka ikon panelu administracyjnego WordPress. Pojawiła się w wersji 3.8 wraz z gruntownym przeprojektowaniem panelu i od tego czasu jest używana dla każdej pozycji lewego menu: „Wpisy", „Media", „Wtyczki", „Ustawienia", wszystko to Dashicons.

Czcionka zawiera około 300 ikon, pokrywających praktycznie każdą potrzebę: typy wpisów, media, sieci społecznościowe, edytor, powiadomienia, taksonomie, widgety. Pełny katalog z wyszukiwarką jest dostępny na stronie Dashicons w WordPress Developer Resources.

Główna przewaga nad tym samym Font Awesome to zerowy koszt podłączenia. Dashicons są już załadowane w panelu administracyjnym, a dla warstwy front-end dodaje się je jedną linijką w functions.php. Nie ciągnie Pan/Pani na stronę biblioteki z 2000+ ikon, z których 90% nigdy nie będzie potrzebnych. Jeśli jednak potrzebny jest niestandardowy zestaw, proszę przyjrzeć się Fontello, gdzie można zebrać arkusz stylów tylko z wybranych ikon.

Ważny niuans: projekt Dashicons nie przyjmuje już zgłoszeń na nowe ikony od czerwca 2023 roku. Istniejący zestaw został zamrożony, ale do typowych zadań WordPressa wciąż wystarcza z dużym zapasem.

Sposób 1: Ikona dla niestandardowego typu wpisu

Najczęstszy scenariusz: rejestruje Pan/Pani nowy typ wpisu przez register_post_type i chce Pan/Pani, aby w panelu administracyjnym obok jego nazwy była sensowna ikona, a nie domyślna „pinezka".

Robi się to argumentem 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 );

Wartość menu_icon to klasa CSS ikony. Proszę wejść na stronę Dashicons, kliknąć potrzebną ikonę i skopiować jej klasę z wyskakującej podpowiedzi. Wystarczy podstawić dashicons-{slug}, a WordPress sam wyrenderuje ikonę w lewym menu.

Przed pojawieniem się Dashicons trzeba było podawać bezpośredni adres URL obrazu dla menu_icon. Na stronie z tuzinem wtyczek ikony różniły się stylami, a panel administracyjny wyglądał niechlujnie. Teraz wszystkie ikony typów wpisów dziedziczą jednolity styl interfejsu WordPress, schludnie i bez zbędnych ruchów.

To samo podejście działa dla stron dodanych przez 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
);

Piątym parametrem po funkcji callback przekazywana jest klasa Dashicon i nowa pozycja menu otrzymuje ikonę z tej samej rodziny, co wszystkie standardowe.

Sposób 2: Dashicons we frontendzie motywu

Ikony są potrzebne nie tylko w panelu administracyjnym. Metadane wpisu (data, kategoria, autor), przycisk wyszukiwania w nagłówku, ikona koszyka to typowe miejsca, gdzie znaczek czyni interfejs bardziej zrozumiałym.

Aby włączyć Dashicons na zewnętrznej części witryny, proszę dodać w functions.php:

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

Teraz można wstawić ikonę przez HTML w dowolnym szablonie motywu:

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

Zamienia Pan/Pani calendar na slug potrzebnej ikony i jest ona wyświetlana. Kod HTML działa w każdym miejscu motywu: header.php, footer.php, single.php, a nawet bezpośrednio w polu „Etykieta" pozycji menu (WordPress przepuszcza HTML w etykietach nawigacyjnych).

Do grupowania z tekstem proszę używać pomocniczej klasy dashicons-before, która dodaje ikonę przed zawartością elementu bez dodatkowego znacznika:

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

Sposób 3: Shortcode do wstawiania ikon w treści

Jeśli tworzy Pan/Pani stronę dla klienta, który nie radzi sobie z HTML, proszę dać mu shortcode. Raz dodaje Pan/Pani kod w functions.php, a klient wstawia ikonę w dowolnym wpisie przez [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
} );

Użycie w edytorze:

1
[dashicon icon="chart-pie"]

Shortcode zakłada, że włączył już Pan/Pani styl Dashicons we frontendzie (Sposób 2). Jeśli tego Pan/Pani nie zrobi, ikona się nie wyświetli. Alternatywnie można osadzić wp_enqueue_style bezpośrednio w ciele shortcode'a, wtedy styl załaduje się tylko przy faktycznym użyciu ikony. Ale to podejście ma pewien niuans: arkusz stylów załaduje się w stopce strony i ikony „migną" po renderowaniu. Globalne podpięcie jest bardziej niezawodne.

Bonus: Dashicons w blokach Gutenberga

Jeśli tworzy Pan/Pani niestandardowe bloki, Dashicons działają również tam. Podczas rejestracji bloku przez registerBlockType proszę wskazać parametr icon z nazwą 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
} );

Dla komponentów React w panelu administracyjnym dostępny jest gotowy komponent Dashicon z pakietu @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
);

Działa to tylko w panelu administracyjnym (edytor bloków, strony ustawień). We frontendzie komponent Dashicon nie wczytuje stylów, tam, tak jak poprzednio, potrzebne jest wp_enqueue_style('dashicons').

⁉️🤔 Często zadawane pytania

Czy trzeba instalować wtyczkę, aby używać Dashicons?

Nie. Dashicons są wbudowane w rdzeń WordPressa od wersji 3.8. Dla panelu administracyjnego są podpięte domyślnie. Dla frontendu wystarczy jedna linijka wp_enqueue_style('dashicons') w functions.php.

Czym Dashicons są lepsze od Font Awesome?

Rozmiarem i brakiem zewnętrznej zależności. Font Awesome zawiera 2000+ ikon, z których większość nie jest Panu/Pani potrzebna. Dashicons, około 300, wszystkie są dostosowane do WordPressa, a styl jest już na serwerze. Jeśli ikona jest w katalogu Dashicons, proszę ją wziąć i nie dokładać zbędnych rzeczy.

Jakie ikony są dostępne w Dashicons?

Około 300: typy wpisów, media, sieci społecznościowe, edytor, powiadomienia, taksonomie, widżety, specyficzne dla WordPressa (Products, Buddicons). Pełna lista z wyszukiwarką na developer.wordpress.org/resource/dashicons.

Czy można dodać własną ikonę do Dashicons?

Nie. Od czerwca 2023 roku projekt nie przyjmuje zgłoszeń na nowe ikony. Jeśli potrzebnego znaczka nie ma w katalogu, proszę użyć Font Awesome, Fontello lub załadować niestandardowe SVG.

Dlaczego ikony nie wyświetlają się we frontendzie?

Najprawdopodobniej zapomniał Pan/Pani wywołać wp_enqueue_style('dashicons'). Proszę sprawdzić functions.php: wywołanie musi być podpięte do haka wp_enqueue_scripts. Inny powód: motyw lub wtyczka wyłącza Dashicons przez wp_dequeue_style.

Czy warto używać Dashicons w 2026 roku

Krótka odpowiedź: tak, do panelu administracyjnego i prostych potrzeb frontendowych. Dashicons to zerowy narzut, przewidywalny rendering i pełna integracja z interfejsem WordPressa. Dla niestandardowych typów wpisów i pozycji menu w panelu administracyjnym jest to nadal de facto standard.

Ograniczenia warto rozumieć zawczasu: zestaw ikon jest zamrożony, nowe nie są dodawane. Jeśli buduje Pan/Pani stronę o bogatej oprawie wizualnej, Font Awesome lub niestandardowy sprite SVG dadzą więcej elastyczności. Ale dla większości typowych zadań WordPressa wbudowana czcionka wystarcza z nawiązką i nie ma sensu ciągnąć biblioteki na 2000+ symboli dla trzech ikon.

Najszybszy sposób dodania ikony dla niestandardowego typu wpisu: proszę skopiować klasę z katalogu Dashicons i podstawić w menu_icon. Zajmie to 30 sekund i nie będzie wymagało żadnej wtyczki.

Jeśli materiał był przydatny, proszę obejrzeć instrukcję wideo z użycia Dashicons w menu nawigacji: jest po angielsku, ale wszystkie kroki są pokazane na ekranie, zrozumie Pan/Pani bez tłumaczenia.