Я считаю, что иконочные шрифты — одна из величайших идей, когда-либо рождавшихся в золотой век веб-дизайна. Некоторые великие парни из Automattic, вероятно, чувствуют то же самое, поскольку они решили придумать хороший шрифт для иконок под названием Genericons . В этой статье мы узнаем, как выглядят великолепные иконки и как использовать шрифт Genericons.
Важность Иконочных Шрифтов
Как я уже сказал, мы живем в золотой век веб-дизайна. Новые технологии рождаются каждый день, и браузеры быстро принимают их. В дополнение к новым технологиям во всем мире появляются новые методы проектирования.
В эту золотую эпоху адаптивный веб-дизайн, возможно, является одним из самых популярных концепций. В мире, полном различных устройств, которые подключаются к Интернету, таких как ноутбуки, планшеты и смартфоны, наши дизайны формируются в соответствии с размерами устройства и плотностью пикселей. Как веб-дизайнеры, стало привычкой перемещать элементы и масштабировать графику, чтобы наш дизайн работал на самых разных устройствах, от 27-дюймовых мониторов Apple до Kindles.
Вот где иконки шрифты пригодятся.
Преимущества использования Icon Fonts
В качестве подарка от адаптивного веб-дизайна иконки-шрифты используются, чтобы предложить оптимизированный и масштабируемый пакет графики посетителям на любом устройстве. Кроме того, их кросс-браузерная совместимость позволяет нам заставить их работать даже в старых браузерах, поэтому наши дедушка и бабушка и сотрудники DMV могут также наслаждаться свежими, совершенно новыми иконками!
Не говоря о шутках, вот основные преимущества, которые вы можете получить с помощью шрифта значка:
- Иконочные шрифты являются масштабируемыми. Это означает, что независимо от того, насколько велика ваша иконка, вам не нужно идти на компромисс по качеству изображения или размеру файла.
- Иконочные шрифты могут быть улучшены с помощью простых строк CSS. Вам не нужно открывать свой большой старый редактор изображений, чтобы изменить их цвета или добавить к ним тени. Прозрачность? Проверьте. CSS градиенты? Проверьте. 3D вращение? Проверьте. Вы поняли идею. С помощью нескольких строк кода CSS вы можете делать практически все, что вы можете сделать со своим текстом. В конце концов, эти значки технически являются кусочками текста.
- Иконочные шрифты имеют отличную поддержку браузера. Поскольку они являются шрифтами, и даже Internet Explorer 7 поддерживает шрифты, вам не нужно беспокоиться о том, не появятся ли они в старых браузерах.
-
Иконки шрифтов имеют небольшой размер. Это может звучать как спорный аргумент (поскольку пакет значков PNG может быть почти таким же маленьким, как и шрифты значков), но вы можете видеть, что формат Genericons в формате WOFF, например, имеет размер файла всего 11 КБ. Кроме того, вы должны включить такие вещи, как
my-icon-2x.pngесли вам нужны большие изображения. Кроме того, шрифты значков делают только один HTTP-запрос.
Использование Genericons
Genericons — это отличный шрифт для значков, созданный Automattic , также основателем WordPress. На конец 2013 года шрифт включает 121 иконку, и время от времени он растет. Он также лицензирован по лицензии GPL, поэтому мы можем использовать этот замечательный набор иконок во всех наших проектах с открытым исходным кодом и совместимыми лицензиями.
Если вы не используете значок шрифта на своем сайте WordPress, сейчас самое время включить Genericons!
Включая это в вашу тему
Если вы хотите использовать этот значок шрифта в своей теме, выполните несколько простых шагов:
- Скачать Genericons , нажав гигантскую кнопку Скачать на сайте.
- Загрузите папку со шрифтами в корневую папку вашей темы. Если вы хотите, вы можете переименовать папку и поместить ее в другую папку.
- Скопируйте содержимое файла genericons.css в файл style.css вашей темы. (Если вы изменили имя и путь к папке шрифтов, не забудьте внести изменения в CSS, чтобы исправить путь к файлам шрифтов.)
Вот и все, ваша тема теперь на 100% совместима с Genericons! Теперь вы можете использовать значки в ваших HTML-элементах следующим образом:
|
1
|
<a class="genericon genericon-tablet"
|
Если вы хотите использовать значок в качестве отдельного элемента, вам нужно использовать элемент <i> HTML, например:
|
1
|
<a href="http://tutsplus.com/"><i class="genericon genericon-tablet"></i>
|
Обратите внимание, что вам нужно использовать два класса CSS: genericon и genericon-{icon-name} . Я не собираюсь вставлять имена значков в эту статью (потому что новые значки добавляются в шрифт регулярно), но вы можете увидеть категоризированный список имен значков в файле genericons.css . Кроме того, вы можете проверить genericons.com и нажмите на каждый значок, чтобы увидеть соответствующее имя.
Использование его с плагином Genericon’d
Если вы не хотите интегрировать шрифт в свою тему и использовать пакет значков с отдельным плагином, вы можете использовать плагин Genericon на wordpress.org .
Использование практически такое же — вам просто нужно добавить еще один класс с именем genericond :
|
1
2
|
<a class="genericond genericon genericon-tablet"
<a href="http://tutsplus.com/"><i class="genericond genericon genericon-tablet"></i>
|
Кроме того, вы можете использовать короткий код:
|
1
|
<a href="http://tutsplus.com/">[genericon icon=tablet] This link has the tablet icon, too!</a>
|
Обратите внимание, что на этот раз вам нужно использовать только имя иконки.
Вывод
Иконочные шрифты популярны по ряду причин: их масштабируемость, простота использования и обратная совместимость. С небольшим файлом каждый веб-дизайнер и разработчик может извлечь выгоду из этой удивительной маленькой техники.
Что вы думаете о дженериках? Поделитесь своими комментариями с нами ниже! И если вам понравилась статья, поделитесь ей, чтобы ваши друзья тоже узнали о Genericons!