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

Опубликовано: 01.09.2018

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

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

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

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

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

Для веб-дизайнеров уже вошло в привычку перемещение элементов и масштабирование изображений таким образом, чтобы дизайн работал на различных устройствах — от 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!

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

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

Скачайте Genericons , щелкнув по огромной кнопке Download на сайте. Загрузите папку font в корневую папку вашей темы. Если хотите, можете переименовать папку и поместить ее внутрь другой папки. Скопируйте содержимое файла 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 .

Принцип использования практически тот же — вам просто нужно добавить еще один класс по имени 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!

Источник:
IRC (Internet Relay Chat)
rss