WordPress: Dashicons - векторные иконки

Открыл для себя набор векторных иконок "Dashicons", которые по умолчанию включены в ядро wordpress начиная с версии 3.8. В наборе их уже насчитывается около 200. Именно эти иконки используются в админке wordpress.

Преимущества Dashicons в том что это векторный шрифт, а значит иконки будут выглядеть хорошо независимо от размера. Их размеры, цвет, свойства можно легко менять с помощью css-стилей, при этом размер иконки в пикселях никак не повлияет на ее размер в байтах. Если вы любите использовать множество различных иконок, то теперь вам не понадобиться возиться с css-спрайтами, чтобы оптимизировать количество запросов при загрузке страницы.

Итак, как подключить и использовать Dashicons?

Если Вы хотите использовать Dashicons не только в админке, но и в своей теме, то Вам сначала нужно подключить css-файл "/wp-includes/css/dashicons.min.css".

Сделать это можно разными способами, например добавить в файл шаблона header.php и добавить туда что-то вроде:

<link rel='stylesheet' id='dashicons-css' href='/wp-includes/css/dashicons.min.css' type='text/css' media='all'/>

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

После того как css-файл подключен иконки можно добавлять через div-блоки например вот так:

<div class="dashicons dashicons-rss" style="font-size:80px;color:#ffa500;display:inline;">
</div>

Результат:

Еще пример:

<div class="dashicons dashicons-twitter" style="font-size:120px;color:#0074a2;display:inline;">
</div>

Результат:

Или через css-стили вот таким образом:

.myicon1:before { 
 content: "\f303";
 display: inline-block;
 -webkit-font-smoothing: antialiased;
 font: normal 22px/1 'dashicons';
 vertical-align: top;
 }

Ознакомиться со всеми иконками можно на этой странице: melchoyce.github.io/dashicons/

Кликайте на иконку и жмите "Copy HTML" или "Copy CSS" в верхней части экрана чтобы узнать html или css код.