Векторные иконки в дизайне сайта

WEB технологии развиваются стремительными шагами, в арсенале сайтостроителей появляются все новые инструменты.
В этой статье я хотел поговорить о векторных иконках в дизайне сайта. Данная технология рассчитана на современные браузеры, которые умеют работать с загружаемыми шрифтами. К счастью, кроме ущербной Оперы Мини, все остальные браузеры (по крайней мере известные мне) отлично это поддерживают.

Для начала, давайте вспомним все доступные нам меторы украшательства и сравним их достоинства и недостатки.

Старый, классический метод.

Тут, каждая иконка представляет собой отдельную картинку (gif, png или jpg) и обычно вставляется в код страницы с помощью тэга <img>.
Разумеется, картинку можно привязать к фону какого-нибудь стиля и использовать, но чаще всего встречается именно <img>. В частности, в JohnCMS сделано именно так.

Достоинства
Простейший (классический) метод, доступный для понимания даже начинающему дизайнеру. Возможно использовать любые быдлокодерские Wysiwyg HTML редакторы.
Поддерживается всеми, даже самыми дремучими браузерами.
Цветные иконки.
Любую из иконок легко заменить, достаточно закинуть новую картинку с таким же именем и размером.
Иконки легко редактировать на любом графическом редакторе.

Недостатки
Если у Вас в интерфейсе используется одна и та же иконка, но разного размера, приходится делать отдельные файлы с картинками, соответствующих размеров.
При масштабировании теряется качество, особенно актуально для современных дивайсов с HD экранами.
Для загрузки каждой из иконок используется отдельный HTTP запрос, что нагружает сервер и в целом замедляет загрузку страницы.
Довольно много HTML кода, особенно если все писать по стандартам, с указанием alt и размеров изображений.
Сложно реализовать "темы" со сменой иконок интерфейса.

Спрайты
Технология спрайтов является развитием классического метода с использованием растровой графики, но с рассчетом на более современные браузеры и CSS технологии.
Сутьт метода такова, что все иконки размещаются в одном файле и далее, уже с помощью CSS выбирается участок изображения с нужной иконкой и привязывается к какому-нибудь стилю элемента.
Техническая реализация не очень сложна и состоит из 2-х этапов: подготовка спрайта и подготовка CSS стиля.

Готовим спрайт
Приближенно прикидываете, сколько у Вас иконок одинакового размера (например 16х16), для каждого размера придется делать отдельный спрайт.
Далее, (например) у нас 30 штук иконок 16х16, надо сделать из них спрайт.
Для этого, в графическом редакторе создаем пустой PNG или GIF файл с прозрачным фоном. Размер файла зависит от к-ва иконок и их размера и от того, как Вы их (иконки) будете размещать. Можно в клетку, а можно и в столбик. Я например всегда использовал "в столбик", ибо потом меньше волокиты с координатами в CSS.
Поле нашей картинки мысленно надо разбить на клетки, в каждой из которых потом будет иконка. Размер клетки берется с небольшим запасом (заведомо больше, чем иконка). Для иконок 16х16 пикселей, я обычно делаю клетку 20х20.
Итого, у нас 30 иконок 16х16, размещать их будем в столбик, в клетках 20х20.
Посему, размер нашего пустого файла должен быть 20px шириной и 600рх высотой (30 клеток по 20 пикселей).
В работе Вам очень помогут продвинутые графические редакторы, которые позволяют устанавливать гайдлайны (guidelines), там Вы сразу сможете их поставить с интервалом в 20 пикселей. Зато потом очень легко будет размещать иконки.
Ну и потом, размещаете все нужные иконки в каждой клетке.
Сохраняем файл (в нашем примере это будет sprite.png)

Готовим CSS стиль
В стиле нам надо к чему-нибудь привязать иконки. Это может быть например <span> или, что чаще делают <i>, что мы в нашем примере и реализуем.
Тэг <i> будет являться контейнером для наших иконок и его надо предварительно подготовить.
Важные параметры:

display: inline-block;
background: url('sprite.png') no-repeat;
width: 20px;
height: 20px;

Ширину и высоту контейнера мы указываем так, как у наших клеток для иконок, о которых мы говорили выше.
Ну и далее, надо описать собственно иконки.
Пример:

i.guestbook {background-position: 0 -40px;}

В качестве параметра мы указываем координаты начала нашей клетки с нужной иконкой.
Учтите, что вычисление координат идет с верхнего левого угла изображения.
У самой первой иконки координаты будут 0 0
Ну и далее, ко второму параметру добавляете по 20, так Вы постепенно перечислите все ваши иконки.

З.Ы. Для лентяев и быдлокодеров:
Хочу добавить, что в сети есть полно сайтов-сервисов, где спрайт, вместе с CSS файлом подготовят за Вас. Просто подготовьте отдельные иконки, загрузите туда и получите готовый вариант.

Достоинства
Уменьшается число HTTP запросов, снижается нагрузка на сервер и ускоряется загрузка страницы.
Иконки задаются с помощью стилей, поэтому значительно уменьшается HTML код.
Легко реализовать смену "тем" оформления.

Недостатки
При масштабировании теряется качество, особенно актуально для современных дивайсов с HD экранами.
Более сложный процесс подготовки
Для иконок другого размера надо делать отдельный спрайт, или же колдовать со стилями.

Векторные иконки (шрифты)

Самый современный метод украшательства нашего интерфейса предполагает использование шрифтов с векторными иконками (glyph icons).
Главное достоинство - маленький размер всего пакета иконок, возможность как угодно масштабировать, менять цвет и применять любые CSS эффекты для текстов (тень, вращение и т.д.).
Главный недостаток - это невозможность использовать цветные иконки. Однако современные тенденции в дизайне как раз и рекомендуют нам использовать "глифы", как Вы можете сами убедиться, большинство крупных сайтов перешли на них.
Еще надо упомянуть, что возникают проблемы со старыми браузерами и с Opera Mini, которые не поддерживают загружаемые шрифты. Однако на сегодня дремучие браузеры почти никто не использует, все мобильные дивайсы (смартфоны) отлично все поддерживают. Ну а вместо Оперы Мини есть полно других хороших браузеров, включая от той же Оперы.

Как и в спрайтовой технологии, подготовка состоит из 2-х этапов: готовим шрифты и делаем CSS.

Готовим шрифты
Дизайнеры-хардкорщики разумеется могут воспользоваться специальным софтом для работы со шрифтами, я не буду это тут описывать, профессионалы и сами все найдут, или уже давно у себя имеют. Статья то для начинающих, потому будем искать простые пути решения проблемы.
Самый простой метод - это воспользоваться готовыми шрифтами с наборами иконок. На просторах инета их можно найти много, как платных, так и бесплатных.
Наиболее известные - это Fonts Awesome, Glyphicons ну и обязательно надо упомянуть Google Material Design.
Для большинства случаев подойдут иконки от Fonts Awesome, они поставляются в виде готового пакета с шрифтами и стилями, подключай и пользуйся.
А как быть, если Вас не устраивает готовый набор, Вы хотите применить свой набор иконок, или например использовать Google Material Design из Гитхаба, который поставляется в виде SVG исходников?
Тут тоже есть красивое решение проблемы. Имеется отличный онлайн сервис Fontello, который позволит Вам создать свой шрифт с индивидуальным набором иконок, подготовит для него CSS стиль и позволит скачать в виде готового пакета.
Настоятельно рекомендую данный сервис, причем не только для лентяев и быдлокодеров, он облегчит работу и профессионалам
Обратите внимание, что вместе с пакетом шрифтов скачивается файл config.json на Вашем сайте он не понадобится, но не выбрасывайте его. У Fontello есть замечательная функция - это продолжение работы с Вашим проектом. Вы загружаете этот самый config.json и все Ваши иконки и настройки окажутся на сайте, вы можете продолжить работу, например добавить какие-нибудь иконки, или удалить ненужные.
З.Ы. Вы можете об ратить внимание, что несмотря на то, что у Вас используется один шрифт, в пакете их 5 штук. Это нужно для поддержки различных браузеров, каждый загрузит именно тот шрифт, который понимает и умеет с ним работать.

Готовим CSS
Процесс подготовки CSS чем то похож на спрайтовую технологию.
В начале мы указываем загружаемые шрифты, потом описываем наш контейнер для иконок и наконец, перечисляем в стилях все свои иконки.
Разница в том, что для спрайтов мы указываем координаты иконки в пикселях, а для шрифтов мы должны указать двоичный код нужного символа.
Найти этот двоичный код можно с помощью любой таблицы символов.
Хотя, если Вы пользуетесь готовыми наборами (например Fonts Awesome), или используете Fontello, заморочки с поиском кодов не понадобится, Вам даются уже готовые стили с прописанными в них кодами.

Достоинства
Неограниченное масштабирование иконок без потери качества.
Возможность менять цвет и применять любые CSS эффекты для текстов.
Небольшой размер пакета иконок.
Ускорение загрузки страниц за счет того, что грузится всего 1 шрифтовый файл.
Легко можно менять "темы" оформления, самые широкие возможности для творчества.

Недостатки
Невозможно использовать полноцветные иконки.
Сложный процесс подготовки, однако можно использовать онлайн сервисы, которые делают всю работу за Вас.
Старые браузеры и Opera Mini не поддерживают данную технологию.

Ну все, наконец дописал статью, надеюсь пригодится для набирающих опыт (intermediate level) дизайнеров.

AlkatraZ, То что иконки выходят не полноцветные мне наоборот нравятся да и плюс тень и уже почти полноцветные
Upd: Щас думаю попробовать сделать шрифтовые смайлы посмотреть как оно будет выглядеть

Блин только найти бы шрифтовые смайлы

# Swank (01.11.2014 / 11:39)
Блин только найти бы шрифтовые смайлы

http://ruseller.com/adds.php?r ... =3199
Посмотри тут

# Swank (01.11.2014 / 11:33)
AlkatraZ, То что иконки выходят не полноцветные мне наоборот нравятся да и плюс тень и уже почти полноцветные
Upd: Щас думаю попробовать сделать шрифтовые смайлы посмотреть как оно будет выгляд

Да, разумеется, современные тенденции в дизайне как раз и рекомендуют делать монохромные иконки.
Получается действительно красиво.
Если так задуматься, то иконки нужны как подсказка, они не должны сильно отвлекать внимание, а просто ненавязчиво помогать в принятии решения.
---
Что касается смайлов, то их запросто можно сделать на шрифтах.
Найди нужные картинки в SVG формате и воспользуйся сервисом Fontello.

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