В веб-дизайне и сайто-строительстве сегодня очень популярны шрифтовые иконки.
Чем объясняется подобная распространенность таких иконок и что они из себя представляют вообще? Само название шрифтовые - говорит о многом.
Фактически шрифтовые иконки - это тот же самый шрифт, только вместо букв дизайнером нарисованы иконки. Преимущество таких иконок в том, что они являются векторными рисунками. Отсюда возможность легко масштабировать без потери качества, применимость к ним многих CSS-свойств.
Объяснения объяснениями, но лучше на практике раз попробовать с ними столкнуться или поработать. Чтобы не забираться в дебри, скажу сразу - каждый из нас сталкивался хоть раз в жизни с такими шрифтами.
Для этого откройте Microsoft Word, выберите в нем любой из наборов шрифтов - “Wingdings”, “Wingdings 2”, “Wingdings 3” - и попробуйте попечатать в пустом документе. Вместо “букав” будут печататься всякие разные символы:
Это происходит как раз потому, что вместо букв художником в этих шрифтах были созданы такие символы (иконки). Но давайте немного углубимся вдаль, в веб-дизайн.
В этой области символы и иконки применятся повсеместно, поэтому практическое применение их гораздо целесообразнее. Однако на макете или на сайте используются только несколько иконок из всего набора шрифтов. Не имеет смысла “таскать” с собой полный шрифтовой набор, когда нужно только пару символов из него.
Для этих целей умными людьми были созданы специальные online-сервисы, с помощью которых можно выбрать из наборов шрифтов (а их может быть большое количество на таких ресурсах) только те символы, которые необходимы.
Упоминание одного из таких сервисов (кстати, очень популярного) я встретил недавно, просматривая видеокурс “TutsPlus - PSD to WordPress minimal portfolio”. В одном из уроков автор Adi Purdila говорит о том, что сервис IcoMoon очень легко и просто использовать для целей применения шрифтовых иконок на сайте.
Раз сервис IcoMoon легко и просто использовать - тогда это как раз для нас! Давайте попробуем выбрать с его помощью несколько нужных нам символов и “прикрутим” их к нашему проекту.
Для этого переходим по адресу, на котором расположен сервис IcoMoon и переходим на нем в раздел Application. В окне браузера появиться таблица с шрифтовыми иконками, из которой можно выбрать необходимые:
Помимо возможности выбрать иконки, их можно редактировать. Для этого нужно предварительно выбрать вверху значок карандашика. Если потом выбрать нужную иконку, то откроется окно редактирования, в котором можно выполнить поворот по часовой стрелке и против, зеркально отобразить иконку по вертикали и по горизонтали, изменить размеры иконки:
Когда нужный набор иконок выбран, переходим вниз страницы и нажимаем кнопку Font. Откроется промежуточное окно, в котором представлен список всех выбранных для скачивания иконок и их характеристики:
Здесь также можно отредактировать необходимые иконки - название, код и так далее. Если все устраивает, нажимаем кнопку Download, чтобы скачать выбранный набор в виде архива:
В этом архиве есть много чего, в том числе и демо-файлы. Но для дальнейшей работы потребуется всего пара вещей - папка с именем 1
fonts
1
style.css
Директорию со всем ее содержимым просто перекидываем в проект “как есть”, а файл 1
style.css
Нам потребуется его содержимое, которое также можно перенести в css-файл проекта почти без изменений. Но рассмотрим содержание 1
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-странице. В данном случае - через псевдоэлемент 1
: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%);
}Вот мы и познакомились со шрифтовыми иконками. Все оказалось просто и приятно в работе.