Шрифтовые иконки и сервис IcoMoon

Reading time ~4 minutes

В веб-дизайне и сайто-строительстве сегодня очень популярны шрифтовые иконки.

Чем объясняется подобная распространенность таких иконок и что они из себя представляют вообще? Само название шрифтовые - говорит о многом.

Фактически шрифтовые иконки - это тот же самый шрифт, только вместо букв дизайнером нарисованы иконки. Преимущество таких иконок в том, что они являются векторными рисунками. Отсюда возможность легко масштабировать без потери качества, применимость к ним многих CSS-свойств.

Объяснения объяснениями, но лучше на практике раз попробовать с ними столкнуться или поработать. Чтобы не забираться в дебри, скажу сразу - каждый из нас сталкивался хоть раз в жизни с такими шрифтами.

Для этого откройте Microsoft Word, выберите в нем любой из наборов шрифтов - “Wingdings”, “Wingdings 2”, “Wingdings 3” - и попробуйте попечатать в пустом документе. Вместо “букав” будут печататься всякие разные символы:

Шрифтовые иконки Wingdings в Word

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

В этой области символы и иконки применятся повсеместно, поэтому практическое применение их гораздо целесообразнее. Однако на макете или на сайте используются только несколько иконок из всего набора шрифтов. Не имеет смысла “таскать” с собой полный шрифтовой набор, когда нужно только пару символов из него.

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

Упоминание одного из таких сервисов (кстати, очень популярного) я встретил недавно, просматривая видеокурс “TutsPlus - PSD to WordPress minimal portfolio”. В одном из уроков автор Adi Purdila говорит о том, что сервис IcoMoon очень легко и просто использовать для целей применения шрифтовых иконок на сайте.

Раз сервис IcoMoon легко и просто использовать - тогда это как раз для нас! Давайте попробуем выбрать с его помощью несколько нужных нам символов и “прикрутим” их к нашему проекту.

Для этого переходим по адресу, на котором расположен сервис IcoMoon и переходим на нем в раздел Application. В окне браузера появиться таблица с шрифтовыми иконками, из которой можно выбрать необходимые:

Набор иконок для выбора необходимой иконки из таблицы

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

Редактирование выбранной иконки в IcoMoon

Когда нужный набор иконок выбран, переходим вниз страницы и нажимаем кнопку Font. Откроется промежуточное окно, в котором представлен список всех выбранных для скачивания иконок и их характеристики:

Окно предварительного редактирования набора иконок

Здесь также можно отредактировать необходимые иконки - название, код и так далее. Если все устраивает, нажимаем кнопку Download, чтобы скачать выбранный набор в виде архива:

Готовый архив с иконками сервиса IcoMoon

В этом архиве есть много чего, в том числе и демо-файлы. Но для дальнейшей работы потребуется всего пара вещей - папка с именем fonts и файл style.css.

Директорию со всем ее содержимым просто перекидываем в проект “как есть”, а файл style.css открываем в HTML-редакторе.

Нам потребуется его содержимое, которое также можно перенести в css-файл проекта почти без изменений. Но рассмотрим содержание style.css более подробно:

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

… эти строчки кода “обычные” - здесь происходит подключение скачанных шрифтов. Только нужно немного исправить путь к файлам:

[class*="icon-"] {
 font-family: 'icomoon';
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;
 /* Better Font Rendering =========== */
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

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

.icon-bubble:before {
 content: "\e600";
}
.icon-bubbles:before {
 content: "\e601";
}
.icon-bubbles2:before {
 content: "\e602";
}

Классы для скачанных шрифтовых иконок и пример их применения в HTML-странице. В данном случае - через псевдоэлемент :before.

Как видно из кода, иконки можно очень легко редактировать черед правила CSS. Давайте немного пофантазируем и преобразуем вышеприведенный код:

@import "compass/css3";
.icon-bubble:before {
 content: "\e600";
}
.icon-bubbles:before {
 content: "\e601";
 margin-right: 5px;
 color: #ff0000;
}
.icon-bubbles2:before {
 content: "\e602";
 margin-right: 10px;
 color: #0000ff;
 font-size: 26px;
 line-height: 26px;
 cursor: pointer;
 @include transition-property(color);
 @include transition-duration(.5s);
 @include transition-timing-function(ease-in);
}
.icon-bubbles2:hover:before{
 color: darken(#0000ff, 20%);
}

Вот мы и познакомились со шрифтовыми иконками. Все оказалось просто и приятно в работе.


Различие между exports и module.exports

Попытка разобраться, в чем различие между exports и module.exports, основанная на статье Understanding module.exports ...Continue reading

Комментарии

Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке