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

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

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

Иконки Dashicons

Иконки 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.

Константин Ковшенин

Сооснователь журнала WP Magazine и первой конференции WordCamp в России. Разработчик в компании Automattic, принимает активное участие в развитии ядра WordPress. Любимый язык программирования: Python.

Подписаться на рассылку

Подписаться → Подпишитесь на бесплатную рассылку журнала WP Magazine и получайте новости, события, подборки тем и плагинов, уроки, советы и многое другое в мире WordPress!

  • Владимир Петрозаводский

    и как теперь правильно иконки использовать эти иконки раньше просто register_post_type() например передал параметр menu_icon и готово , а теперь что как?

    • Владимир, хороший вопрос. Использовать Dashicons в навигационном меню в админке можно с помощью CSS и события admin_head, вот рабочий пример.

      • Владимир Петрозаводский

        раньше как более более непринужденно добавлялось))а что будет со старым способом добавления иконок, объявят deprecated в кодексе?

        • Оказывается поддержка Dashicons и до register_post_type дошла. В аргументе menu_icon вместо привычного URL можно указать название иконки, например «dashicons-facebook» и WordPress сам догадается использовать Dashicons. Вот пример.

          То же самое касается аргумента icon_url функции add_menu_page.

          • Владимир Петрозаводский

            даже не надеялся на то что уже работает, ну тогда все в порядке)) молодцы девелопепры, глубоко поработали!

      • Владимир Петрозаводский

        да а ещё можно подцепиться к событию login_enqueue_scripts, что я сейчас и делаю

  • Владимир Петрозаводский

    кстати кажется баг с иконкой этой dashicons-testimonial как минимум, честно не знаю как посмотреть все символы шрифта особо не силен во всей этой типографике но факт остается в примере есть а в водрпресе нету методом тыка типо f303,f304,f305… тоже не нашел

    • Действительно именно этой иконки почему-то нет в ядре. Баг это или нет пока не известно, спросим у дизайнеров :)

    • Владимир, выяснилось что testimonial это новая иконка, и обновленный пакет войдет в ядро в 3.8.1 или 3.9.

      • Владимир Петрозаводский

        вот оно как ну хорошо бы если в духе коротких релизов уже в 3.8.1 добавили бы

        • Сейчас задача помечена как 3.8.1, который должен появится где-то на следующей неделе. См. #26518.

  • трубки телефонной что то не обнаружил я.

    • В комплекте Genericons есть иконка мобильного телефона, а вот именно трубки нет :( да и факса тоже ;)

      • razboynikjm

        Уже появилась трубка. Меня интересует другое. Например, если человек разработал сам дополнительные иконки, может ли он добавить их в оф. набор, что-бы после обновления версии WordPress они появились у всех в наборах? :)

        • Вы можете их предолжить для включения в ядро WordPress через баг-трэкер, ну а если не примут, то вы можете создать собственный шрифт с иконками, как например Genericons.

          • razboynikjm

            Спасибо. Интересная идея.

  • Людмила

    Скажите, как можно попасть в свою админку, если доступ закрылся из-за неправильной настройки SSL?

    • Людмила, все зависит от того, как именно WordPress настроен для работы с SSL. Чаще всего это одна или несколько директив в конфигурационном файле wp-config.php, которые можно отключить и зайти в панель администрирования по HTTP, а не HTTPS. Хостинг-провайдер так же мог настроить обязательный доступ по HTTPS на уровне веб-сервера, в этом случае вам нужно попросить его отключить.