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

С выходом WordPress 3.8 появился новый пакет иконок Dashicons, который входит в состав ядра WordPress. На сегодняшний день он насчитывает более 150 векторных изображений, которые вы можете легко использовать в ваших темах и плагинах WordPress.

Иконки Dashicons

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

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

После подключения Dashicons, мы можем использовать их в коде HTML с помощью специальных классов dashicons и dashicons-*:

<a href="http://twitter.com/wpmagru">
    <span class="dashicons dashicons-twitter"></span>
    Следуйте за наим в Twitter
</a>

На месте элемента span появится иконка социальной сети Twitter. Ее размер по умолчанию — 16×16 пикселей, но его можно легко изменить с помощью CSS. Узнать значение класса той или иной иконки вы можете на сайте Dashicons.

Вы так же можете добавить Dashicons к вашим элементам с помощью селектора :before в CSS:

<style>
    .my-icon:before {
        content: "\f301";
        display: inline-block;
        -webkit-font-smoothing: antialiased;
        font: normal 16px/1 'dashicons';
        vertical-align: top;
    }
</style>
<a href="http://twitter.com/wpmagru" class="my-icon">Следуйте за наим в Twitter</a>

Значение для свойства content той или иной иконки можно так же посмотреть на сайте Dashicons.

Кстати, если ваши стили находятся в отдельном файле CSS, вы можете объявить зависимость вашего файла от Dashicons при их регистрации с помощью wp_enqueue_style, тогда WordPress будет автоматически подключать Dashicons перед тем, как подключить ваши стили. В теме WordPress это будет выглядеть следующим образом:

function my_styles() {
    wp_enqueue_style( 'theme-name', get_stylesheet_uri(), array( 'dashicons' ) );
}
add_action( 'wp_enqueue_scripts', 'my_styles' );

Учтите, что иконки Dashicons появились в WordPress версии 3.8 и не доступны в ранних версиях. Если вы разрабатываете тему или плагин с поддержкой устаревших версий WordPress, вам придется продумать механизм обратной совместимости.

Если вы ищите альтернативу иконкам Dashicons, советуем рассмотреть Genericons, которые вы можете легко скачать и упаковать вместе с вашей темой или плагином WordPress. Так же как и Dashicons, иконки Genericons распространяются под свободной лицензией GNU GPL.