Использование шрифта 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!