WordPress Dashicons: шрифт іконок для ваших потреб

Dashicons – шрифт іконок для адмінки WordPress – було представлено у версії 3.8 цього двигунця. У версії 3.9 шрифт було доповнено 30 новими іконками, а на сьогоднішній день, з недавнім виходом WP 4.0, цей шрифт містить 201 іконку. Прекрасно! :)

dashicons-1

Знаєте, я прихильник тієї думки, що варто спершу використовувати ресурси WordPress по повній при розробці теми чи плагіна, а вже потім підключати нові бібліотеки. Без сумніву, такий підхід дозволяє економити час розробки і нерви)) Отож, при створенні, наприклад, сторінки з опціями теми чи плагіна я краще використаю ці чудові Dashicons ніж підключатиму будь-який інший шрифт іконок.

Шрифти іконки (icon fonts) це чудовий спосіб додати різноманітні іконки у ваш проект, різної кольору і розміру, без потреби використання графічних редакторів. Один раз додавши такий шрифт ви можете використовувати десятки і сотні варіантів представлення іконок. На сьогодні вони дуже популярні. Ось лише деякі веб ресурси з різними шрифтами іконками: https://icomoon.io/#icons , http://weloveiconfonts.com/ , http://www.flaticon.com/ , http://ionicons.com/

Власне, зробити це простіше простого. Стилі, пов’язані з використанням цього шрифта вже додані на всіх сторінках адмінки, отож нічого більше підключати не треба. Далі я додаю html тег із спеціальним класом:

<span class="dashicons dashicons-universal-access"></span>

І ось як це виглядає:

dashicons-2

Dashicons можна використовувати також і у фронт енді, в темі, наприклад. Однак, перед цим потрібно додати вивід стилів шрифта іконок у фронт енд. Ось як:

function uni_dashicons() {
    wp_enqueue_style( 'dashicons' );
}
add_action( 'wp_enqueue_scripts', 'uni_dashicons' );

Після цього використовуйте html тег зі спеціальними класами доданими до нього, щоб показати ту чи іншу іконку. Звісно, ви не знаєте на пам’ять всі доступні класи. Власне, як і я. Тому я використовую Dashicons Cheat Sheet. Тут є повний перелік іконок з назвами класів і навіть кодами! До речі, знаючи коди ви можете додати потрібну іконку до будь-якого вашого класу. Ось вам ще один спосіб використання Dashicons у своєму проекті. CSS код:

.uni-my-custom-class:before {font-family: "dashicons";content: "\f147";color: green;font-size: 24px;}

Як видно, я використав сімейство шрифтів dashicons, через атрибут content додав код потрібної мені іконки, також вибрав колір і розмір шрифта (він же розмір іконки). Моя іконка буде додана до елемента з класом .uni-my-custom-class з допомогою селектора :before.

Нагадаю, ви можете використовувати Dashicons лише починаючи з версії 3.8 двигунця WordPress. У попередніх версіях цього шрифта немає!

Ось ще приклад як додати іконку сімейства Dashicons до пункту меню у адмінці у WordPress. Це варто зробити на етапі реєстрації вашого, наприклад, кастомного типу поста або сторінки опцій. Власне, для кастомного типу поста код буде такий:

register_post_type( 'testimonials', array(
    'public' => true,
    'menu_icon' => 'dashicons-format-status',
    'label' => 'Testimonials',
    'supports' => array( 'title', 'editor', 'custom-fields' )
) );

Я додав клас вибраної іконки у якості значення аргументу menu_icon. Для сторінки опцій, на етапі її реєстрації просто впишіть клас вибраної іконки, наприклад ось так:

add_menu_page( 'Email', 'Email', 'manage_options', 'uni_options_emails', array( &$this, 'emails_options_page' ), 'dashicons-email-alt', 53 );

Тепер замість стандартної іконки шестерні у вас буде іконка листа. Просто, правда? :)

Вам вже є 18 років?

Для переходу по цьому посиланню ви повинні підтвердити, що вам виповнилось 18 років.

Мені немає 18 Мені вже є 18