Email *

Как создать иконочный шрифт

Как создать иконочный шрифт

16 Окт Как создать иконочный шрифт

Posted at 14:58h in Веб-дизайн (UI/UX), Дизайн и реклама, Статьи by

Использование иконок в веб-дизайне — один из популярных способов привлечения внимания к отдельным информационным блокам. При этом векторная графика наиболее оправдана с точки зрения скоростной оптимизации. Мы уже знаем, что SVG код можно вставить практически в любое место на странице сайта или приложения. Но это не всегда удобно, особенно если мы хотим добавить графический элемент внутри текстового блока, меню или списка. Собственный иконочный шрифт сократит время на написание кода и позволит использовать те же возможности векторной графики, что и для отдельных SVG-иконок.

Иконочный шрифт практически ничем не отличается от обычного: все иконки привязаны к отдельным символам unicode, что позволяет вставлять их в том числе внутри текста. В этой статье мы опишем наиболее простой способ создания такого шрифта.

Что лучше, CorelDraw или Adobe Illustrator? — неважно, главное чтобы каждая иконка являлась одной заливкой. Что это означает: векторное изображение может состоять из нескольких объектов. Каждый из них может иметь свой цвет и ограничительные линии — но не в случае со шрифтом. В нашей ситуации иконка — это буква, целая и неделимая. Скажем, буква «Ы», которая состоит, казалось бы, из двух объектов, на самом деле является одним. Если для вас это само собой разумеется — очень хорошо. В CorelDraw это выглядит так:

Иконка из одной заливки

Лень читать? Смотрите видео:

Итак, у нас есть набор иконок для проекта. Все они сохранены в формате SVG, и каждая из них состоит только из одной заливки без абрисов (использование абрисов в шрифтах невозможно). Неважно, какого они цвета, лучше всего использовать #000 — так будет удобнее. Вот пример правильного SVG кода, который готов к использованию для создания шрифтовых иконок:

See the Pen
gKpaBz by Alexander Webmassa (@Webmassa)
on CodePen.

Собирать все иконки в один файл TTF — это долго и неудобно, поэтому воспользуемся онлайн инструментом Icomoon. Там все очень просто — нажимаем Import Icons, выбираем нужные файлы, далее Generate Font. Если в иконках есть абрисы (strokes), их можно преобразовать в заливки, либо проигнорировать. Для каждой иконки можно выбрать название (оно станет свойством glyph-name) и привязку к символу (glyph unicode). Их можно даже масштабировать и двигать, но все же будет лучше, если вы позаботитесь об этом заранее в исходниках. Далее загружаем полученный иконочный шрифт.

Подключение иконочного шрифта на сайте

В загруженном архиве есть несколько файлов шрифта для кросс-браузерности: .eot, .ttf, .woff и код svg, а также демо-файлы .css, .js и .html. Открыв файл HTML в браузере вы можете увидеть таблицу со всеми иконками и соответствующими им символами unicode.

  1. Скопируйте содержимое файла style.css в список стилей вашего сайта.

    Код будет выглядеть примерно так:

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

  2. Скопируйте содержимое папки fonts в папку со шрифтами на сайте.

    В этой папке находятся файлы ttf, woff, eot и svg. Убедитесь, что они привязаны в css.

  3. Примените код для вставки иконок.

    HTML будет выглядеть так:

    <span class="icon-Arrow"></span>

  4. Задавайте стили для отдельных иконок.

    Теперь вы можете применить общий стиль для всех иконок, либо задать для них отдельные свойства. Например:

    .icon-Arrow:before {
 content: "\e901";
 color: #cc3300;
 font-size: 80px;
 }

    А вот и результат применения этого кода:

 

Теперь вы можете использовать иконки внутри текстовых блоков или в любом другом месте на странице. Вам не нужно напрямую вставлять в HTML код SVG или использовать сниппеты. Единственное ограничение — одна заливка и, соответственно, одно свойство для нее. То есть, здесь мы не можем использовать CSS, JS или SMIL анимации для отдельных элементов рисунка. Возможно, технологии когда-нибудь решат и эту проблему, а пока что рисуйте, разрабатывайте и развлекайтесь!