Я считаю, что иконические шрифты — одна из лучших идей, родившихся в золотую эру веб-дизайна. Отличные ребята из 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!

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

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

  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

Вам понравился материал?

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

9 комментариев

сначала новые
по рейтингу сначала новые по хронологии

как в масиве вывода ссылок под иконками дженериконс - сделать увеличение размера одной отдельно?

Жирный минус таких иконок - у многих из них края не сглаженные, а лесенкой. Выглядит уродско.

Antony Bark

Вы что-то путаете :) это вектор. По-умолчанию, у вектора "лесенки" никакой не может быть. Разве что, "лесенка" задана как элемент стиля.

Ничего я не путаю. Даже у вас на первом изображении слева от названия поста почти на каждой иконке видны "лесенки". Абсолютно никакой сглаженности.

На больших иконках такого не наблюдается, но на маленьких - факт.

Antony Bark

уфф.. :) значит там (я чесно говоря, не понял где) не вектор, либо у Вас масштаб увеличен как-то интересно. Либо иконки не векторные. Я в растерянности. Ибо по факту у вектора лучший рендеринг, чем у растра..

В вашей статье (в тексте над этим комментариями) есть два изображения с иконками сервиса Genericons. И на обеих видна эта проблема.

Antony Bark

всё понял! :)

1. статья не моя.

2. Все иллюстрации в этой статье растровые, возможно, автор тут дал промах )

3. вот ссылка на вектор, попробуйте увидеть лесенку 1428.ru/1.svg поиграйте Ctrl+-

Я знаю, что такое векторная графика. Видимо, вы не понимаете, что я хочу донести (и вообще, почему тогда отвечает не автор статьи?).

Суть в том, что почти все маленькие иконки, которые на главной сайта http://genericons.com, с "лесенкой". Что на скринах в вашей статье, что на этом сайте - одно и то же.

Если они векторные, почему тогда выглядят так коряво?

Григорий Мочалин

Хе, прикольная тема)) Мне она очень пригодится при создании кнопок для тем на фотошопе)) Зачет!