ГлавнаяТемыGenericons: бесплатные иконки для ваших тем WordPress

Genericons: бесплатные иконки для ваших тем WordPress

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

Иконки Genericons

Иконки Genericons

Иконки Genericons удобно использовать в веб-проектах, поскольку они упакованы в специальный шрифт, который легко подключить и использовать с помощью CSS. Для этого вам потребуется лишь директория font и файл стилей genericons.css. Подключить стили в вашей теме для WordPress вы можете с помощью функции wp_enqueue_style() в файле functions.php:

function my_scripts_and_styles() {
    wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons.css' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_and_styles' );

После этого вы можете использовать следующий HTML код, чтобы вставить иконку из комплекта Genericons в любом месте вашей темы:

<div class="genericon genericon-standard"></div>

Или же с помощью селектора :before напрямую в CSS стилях темы:

.my-icon:before {
    content: '\f408';
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    font: normal 32px/1 'Genericons';
    vertical-align: middle;
}

Все значения для иконок вы можете найти на сайте Genericons.com, где вы можете нажав на любую иконку, скопировать требуемое значение в формате для вставки в HTML, CSS или же сам «глиф», который вы можете использовать например в Photoshop.

Все иконки Genericons являются векторными, поэтому вы им можете задавать любой размер и цвет, и качество от этого особо не пострадает. Авторы шрифта Genericons рекомендуют размеры кратные 16-ти пикселям, например 32, 48, 64 и т.д. для наилучшего качества.

Лицензия

Важно отметить, что комплект Genericons распространяется бесплатно под свободной лицензией GPL. Это значит, что вы можете пользоваться иконками без ограничений, изменять их, дополнять и даже распространять с единственным условием: вы должны сохранить лицензию.

Данная лицензия играет огромную роль при разработке тем для официальной директории WordPress.org, поскольку лицензия GPL является одним из требованием, а найти качественные иконки с лицензией совместимой с GPL — задача не из лёгких.

Скачать иконки вы можете на официальном сайте Genericons.com. Если вы знаете ещё какие-нибудь комплекты иконок, лицензии которых совместимы с GPL — оставьте комментарий!

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

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

  • MrClon

    >найти качественные иконки с лицензией совместимой с GPL — задача не из лёгких
    Чё, правда? Скорее трудно найти хорошую иконку вообще (точнее хорошую иконку подходящую к другим иконкам, или сразу набор стилистически совместимых иконок в котором есть всё что нужно). Требование лицензионной чистоты не сильно осложняет поиск.

    fontello.com вроде прямой аналог Genericons только фичастей и больше, впрочем не сравнивал.
    thenounproject.com — там конечно зоопарк лицензий, но на сколько я понимаю все они из семейства Creative Commons, что упрощает жизнь. Целью проекта заявлено создание иконок для всего, вообще.
    Ещё есть не модные ныне (цветные, с градиентами, в общем фифифи) наборы иконок для свободных DE, вроде Tango Desktop Project, Humanity Icons или Nuvola.
    Это из того что на ум пришло. Ещё есть openclipart.org и commons.wikimedia.org, но там приходится перебирать много контента либо просто убогого либо не подходящего для иконок, а если и подходящего то для не-модных.

    P.S. иконочный шрифт лучше класть в основной CSS файл, лишний CSS файл, лишний запрос к серверу, а значит +латентность канал (это как минимум) ко времени загрузки страницы.

    P.P.S. А можно отключить эту навороченную внешнюю систему для комментирования и использовать штатную вордпресовскую? Эта приблуда с жаваскриптом и визивигами совершенно не радует.

    • Спасибо за ваше мнение, MrClon!

      Хороших бесплатных иконок и наборов огромное количество в сети, достаточно выполнить поиск по «freebie icons» или что-нибудь в этом роде, один famfamfam чего стоит, но несмотря на лицензию CC-BY, их нельзя использовать в темах WordPress, поскольку лицензия не совместима с GPL.

      Fontello действительно интересный проект — это не один шрифт а целая директория с большим количеством авторов и различными лицензиями, есть и некоторые совместимые с GPL. На The Noun Project не нашёл ни одной иконки, совместимой с лицензией GPL, даже те, за которые приходится деньги платить, а такие проекты как OpenClipart часами можно листать в поисках чего-нибудь стоящего :)

      По поводу того, чтобы слить CSS с основным CSS темы, вы правы, но это не столь важно. К тому же есть плагины или тот же mod_pagespeed, которые умеют сливать все стили в один единый перед выдачей. На данной странице сейчас 13 загруженных файлов со стилями. Если бы мы их слили все в один единственный, мы бы замучились всё это поддерживать, а выигрыш от этого был бы не значительным.

      По системе комментирования, вы не первый кому не понравился Disqus, и мы обязательно учтём ваше мнение при следующей итерации над разделом. Спасибо за комментарий!

      • MrClon

        Требование лицензировать графику под GPL представляется весьма странным, не для того GPL писали. Мне кажется тут какое-то недопонимание, хорошо-бы этот вопрос прояснить.

        • Прояснять особо нечего, прояснили уже всё давно, чёрным по белому:

          Themes are required to be licensed fully under a GPL-compatible license.

  • razboynikjm

    Font Awesome Мне кажется, это лучший набор иконок с лицензией GPL

  • Alexandr Basun

    Жаль ВКонтакте нет

  • Это просто отлично, а в качестве подарка — зашифрованный код в css, который делает неизвестно что.
    Это я про genericons.css