Шрифтовые иконки / Font Icons

Категория: Design/UI/CSS

Векторные иконки существенно упрощают стилизацию документа и занимают гораздо меньший объем нежели растровые изображения. При этом шрифтовые иконки позволяют задавать любой размер и цвет пиктограммы. Цвет, к сожалению, монотонный... но тренды WEB дизайна диктуют метро-стайл, где все должно просто и юзабельно / функционально. Представляю подборку шрифтовых иконок и сервисов для создания кастомных сборок!

Fontello  

Агрегатор содержит не настолько большой объем шрифтовых иконок как IcoMoon, однако имеет более шустрый интерфейс. Один большой недостаток в том, что нет статической ссылки на каждый пакет выбранных иконок (по аналогии с Mootools More). Последний набор иконок запоминается в куках. Есть возможность импортировать и обновить уже собранный ранее пресет иконок (архив или SVG).

IcoMoon

Агрегатор и билдер кастомных сетов шрифтовых иконок. Просто огромная коллекция иконок! Здесь, наверное, есть все известные коллекции глифов. Тут есть Awesome, Entypo, .. Поддерживает обратный импорт уже сгенерированных иконок для дальнейшего обновления набора.

Font Awesome

Подборка около 250 иконок. Совместимость с Twitter Bootstrap. Напрягает отсутствие нормальной иконки для сортировки.

WebHostingHub Glyphs

Содержит около 1500 глифов. Иконки Font Awesome будут посимпатичнее, но в этом наборе есть, пожалуй, все! Поддержка Twitter Bootstrap (Demo).

Mfglabs

Еще один неплохой набор иконок (также доступен на fontello).

FontSquirrel

Сборщик (генератор) шрифтов. Можно использовать для упаковки разных шрифтовых иконок в один файл.

Entypo

Содержит
более 250 глифов (шрифтовых иконок). На сайте нет поиска по тегам или
названиям иконок, поиск можно вести выбирая нужные иконки визуально.

Прочее

  1. Подборка платных иконок - http://css-tricks.com/flat-icons-icon-fonts/
  2. Подборка дополнительных иконок от fontello - https://github.com/fontello/fontello/wiki/
  3. Символьные шрифты
  4. Kickstrap - http://habrahabr.ru/post/141115/;
  5. Сервис с векторными иконками - http://all-silhouettes.com/;


#icon, #font, #svg