Webfont Icons: альтернатива картинкам

Часто приходится создавать для проекта дюжину маленьких иконок с помощью картинок. И каждый знает насколько это утомительно и не гибко. Даже, если у вас уже есть готовые наборы изображений, приходится их нарезать и делать спрайты.

К счастью, HTML5 нам предлагает достойную альтернативу: webfonts. Шрифт может в себя включать наборы графических иконок и символов. Очень известными на данный момент являются наборы Wingdings, а также бесплатные шрифты, такие как Icomoon или Icons, которые вдобавок сопроваждаются HTML и CSS кодом.

Преимущества Webfont Icons

Webfonts может стать идеальной заменой графических элементов:

• Шрифты могут масштабироваться до любого размера, иметь любой цвет и поддержку разных эффектов через CSS
• Кроссбраузерная совместимость
• Один маленький файл может быть намного эффективнее, чем комплект изображений

Недостатки Webfont Icons

Webfonts могут не всегда подойти вам:

• Одиночные символы разных цветов (хотя css может решить эту проблему)
• Шрифт может оказаться тяжелее, чем картинки png или svg
• Размер файлов с картинками может быть меньше размера файла со шрифтом, если вы используете всего несколько иконок

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

IcoMoon приходит на помощь

Icomoon это замечательное HTML5 приложение, которое позволяет решить проблемы описанные выше. Приложение позволяет:

• Просматривать и выбирать из более чем 600 IcoMoon иконок
• Загружать отдельные SVG или вашу собственную коллекцию иконок на основе шрифта
• Настраивать вид иконок непосредственно в браузере
• Добавлять в собственную коллекцию любой номер иконки из представленных
• Назначать иконкам любой удобный для вас символ обозначения
• Скачать демонстрационный код

Приложение находится по адресу keyamoon.com/icomoon/app/, где вы можете найти и загрузить нужные вам иконки в виде шрифта.

​

Чтобы выбрать нужную иконку достаточно кликнуть по ней. Выберете иконку и нажмите Edit чтобы получить возможность поворота изображения, зеркального отображения, перемещения или изменения размеров.

Как только вы определитесь с выбором, нажмите кнопку в самом низу приложения Font, чтобы посмотреть выбранные иконки. Здесь вы можете задать любой символ иконке кликнув в верхней части окошка с её изображением. В нижней части отобразится Unicode index иконки:

​

Теперь достаточно кликнуть в нижней части приложения Download, чтобы загрузить zip. Разархивируйте папку. Внутри неё расположен файл style.css. В этом файле есть примеры стилевого оформления выбранных иконок. Для размещения достаточно выполнить следующее:

Загрузить папку fonts в папку с вашими стилями.

Вставить в ваш CSS файл правило @font-face со сылкой на скачанный шрифт:

@font-face {
	font-family: 'h';
	src:url('fonts/h.eot');
	src:url('fonts/h.eot?#iefix') format('embedded-opentype'),
		url('fonts/h.woff') format('woff'),
		url('fonts/h.ttf') format('truetype'),
		url('fonts/h.svg#h') format('svg');
	font-weight: normal;
	font-style: normal;
}

Этим мы обозначили путь до файлов со шрифтами. Теперь правила для классов или data-атрибутов:

[data-icon]:before { /* если хотите добавить иконку через атрибут data-*/
	font-family: 'h';  /*этот символ  я выбрал в  приложении Icomoon*/
	content: attr(data-icon);
	speak: none;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
.icon-link:before { /* если хотите добавить иконку с помощью класса*/
	font-family: 'h'; /*этот символ  я выбрал в  приложении Icomoon*/
	speak: none;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
.icon-link:before {
	content: "\69";
}

Вариант HTML при использовании класса:

Вариант HTML при использовании data-атрибутов: