Использование шрифта Genericons на вашем сайте WordPress

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

Смотрите также:

• Добавляем шрифты для иконок в WordPress
• Как правильно добавить шрифты Google Web Fonts в WordPress тему
• WordPress плагины для добавления шрифтов Google Fonts

Важность иконических шрифтов

Как я уже говорил, мы живем в золотую эру веб-дизайна. Новые технологии появляются ежедневно, и браузеры быстро их принимают. Вдобавок к новым технологиям, по всему миру развиваются новые техники дизайна.

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

Для веб-дизайнеров уже вошло в привычку перемещение элементов и масштабирование изображений таким образом, чтобы дизайн работал на различных устройствах — от 27-дюймовых мониторов Apple до мобильных телефонов с экраном 3.5 дюйма.

Вот где очень пригодятся иконические шрифты!

Преимущества использования иконических шрифтов

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

Но вернемся к серьезным вещам. Есть много плюсов использования иконического шрифта:

• Иконические шрифты легко масштабируются. Это значит, что в независимости от того, какого размера будут ваши иконки, вам не придется идти на компромисс в качестве изображения или размере файла.
• Иконические шрифты можно изменить с помощью CSS. Вам не нужно открывать ваш редактор изображений для изменения цвета или добавления теней. Прозрачность? Есть. CSS-градиент? Есть. Поворот? Есть. Ну, вы поняли. С помощью нескольких строк CSS кода вы можете сделать практически все то же, что вы можете сделать с текстом. В конце концов, технически эти иконки — текст.
• У иконических шрифтов отличная поддержка браузеров. Поскольку это шрифты, а даже Internet Explorer 7 поддерживает шрифты, вам не нужно переживать по поводу того, будут ли они работать в старых браузерах.
• У иконических шрифтов маленький размер файла. Этот аргумент может быть противоречивым (поскольку набор PNG иконок может быть практически таким же маленьким по размеру, как иконические шрифты), но вы можете увидеть, что файл Genericons в WOFF формате, например, весит всего 11KB. Плюс, при использовании изображений для того, чтобы отображать иконки побольше, вам нужно будет включить вещи типа my-icon-2x.png . А еще иконические шрифты создают только один HTTP запрос.

Вы еще не поверили в крутость шрифтов-иконок? Просто посмотрите эту демо-страницу. Ну как?

Genericons

Genericons — хороший иконический шрифт от создателей WordPress — компании Automattic. Шрифт к концу 2013 года включал 121 иконку и при этом продолжает расширяться. Он лицензирован GPL, так что мы можем использовать этот вкусный набор иконок во всех наших проектах с открытым кодом с совместимыми лицензиями.

Если вы не используете иконический шрифт на вашем WordPress сайте, самое время включить Genericons!

Добавляем шрифт в вашу тему

Если вы хотите использовать этот иконический шрифт в вашей теме, вам нужно сделать всего несколько шагов:

1. Скачайте Genericons, щелкнув по огромной кнопке Download на сайте.
2. Загрузите папку font в корневую папку вашей темы. Если хотите, можете переименовать папку и поместить ее внутрь другой папки.
3. Скопируйте содержимое файла genericons.css в файл style.css вашей темы. (Если вы изменили имя и путь к папке шрифта, не забудьте сделать изменения CSS, чтобы пути к папкам шрифта были рабочие).

Ну вот. Теперь ваша тема на 100% совместима с Genericons. Вы можете использовать иконки в ваших HTML элементах, вот так:

<a class="genericon genericon-tablet" href="http://tutsplus.com/">This link has the tablet icon!</a>

Если вы хотите использовать иконку как отдельный элемент, вам нужно использовать HTML элемент <i> вот так:

<a href="http://tutsplus.com/"><i class="genericon genericon-tablet"></i> This link also has the tablet icon!</a>

Обратите внимание, что вам нужно использовать два CSS класса: genericon и genericon-{icon-name}

Я не буду вставлять в эту статью имена иконок (потому что в шрифт постоянно добавляются новые), но вы внутри файла genericons.css вы можете увидеть список названий иконок, разбитый по категориям. Ну, или посетите сайт genericons.com и щелкните по нужной иконке, чтобы получить ее имя.

Использование шрифта с помощью плагина Genericon'd

Если вы не хотите интегрировать шрифт с вашей темой, а предпочитаете использовать отдельный плагин — вы можете использовать плагин Genericon'd.

Принцип использования практически тот же — вам просто нужно добавить еще один класс по имени genericond:

<a class="genericond genericon genericon-tablet" href="http://tutsplus.com/">This link has the tablet icon!</a>
<a href="http://tutsplus.com/"><i class="genericond genericon genericon-tablet"></i> This link also has the tablet icon!</a>

Либо использовать шорткод:

<a href="http://tutsplus.com/">[genericon icon=tablet] This link has the tablet icon, too!</a>

Обратите внимание, что теперь вам нужно будет использовать только имя иконки.

Заключение

Иконически шрифты популярны по нескольким причинам: масштабируемость, простота в использовании, обратная совместимость. Учитывая небольшие размеры файлов, каждый веб-дизайнер и разработчик сможет в полной мере воспользоваться этой хорошей маленькой техникой.

Что вы думаете по поводу Genericons? Поделитесь комментариями. А если вам понравилась статья, поделитесь ей — пусть и ваши друзья узнают о Genericons!

Источник: code.tutsplus.com

Подпишитесь на еженедельный дайджест про WordPress