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

Создаем собственный шрифт из иконок для сайта. Пошаговая детальная инструкция

2

В этой статье-уроке я расскажу вам как создать свой собственный шрифт для веб-сайта, используя собственноручно созданные иконки. Все, что нам для этого понадобится – программа для создания векторной графики(Adobe Illustrator или Inkspcape) и доступ в интернет!Итак, приступим! Все использованные изображения, иконки и css шрифт этого  вы сможете скачать в конце статьи.

Подготовка векторных иконок

Для этого урока мы сделаем что-то простое. Для первой иконки мы нарисуем обычную звездочку. Для второй иконки – орла с буквой W внутри. Нарисовать это достаточно легко и вы можете создать любые формы и комбинации. Я использовал иллюстратор для этих целей.

После того, как вы закончили творческую часть – ваше творение необходимо сохранить в SVG формате. Жмем “Сохранить Как” и выбираем тип файла как SVG.  Теперь можно переходить непосредственно к созданию шрифта.

icons-wdm

wdm-font1

Создание собственно шрифта

Для этих целей мы используем популярный и бесплатный сервис IcoMoon.

Первое, что нужно сделать – создать новый проект, поэтому кликаем на меню в левом верхнем углу и нажимаем “New Project”. Далее подгружаем наши готовые svg файлы после нажатия на кнопку “Import Icons”. Проделав эти шаги вы должны видеть у себя на мониторе изображение такого рода:

wdm-font3 wdm-font5

Далее выделяем курсором наши иконки (они будут обведены оранжевой рамкой при выборе) и жмем кнопку “Font >” внизу экрана.

Теперь у нас есть возможность изменения кода для каждой иконки (в нашем случаем это будет e600 и e601), названия нашего шрифта, префикса для CSS и так далее. Все это осуществляется в “Preferences”. Также, мы можем посмотреть шрифт в действии, нажам на ссылку “Enable Quick Usage” – что позволит получить временную ссылку на наш шрифт, а также опцию просмотра кода в CodePen.

wdm-font6 wdm-font7
После того, как вы все настроили – нажимаем кнопку “Download” внизу страницы и скачиваем архив. В этом архивы вы найдете ваш шрифт в форматах ttf, eot, svg и woff + демо-страничку со шрифтом.

wdm-font8

Использование иконок на сайте

Теперь, все что нам нужно –  это подключить шрифт CSS при помощи @font-face, и указать другие параметры (они все прописаны в css-файле в архиве, который вы скачали.

Теперь мы можем использовать наш шрифт в HTML коде следующим образом:

Указав название класса для тэга <span> мы получаем нашу иконку.

Скачать урок

Вот и все! Теперь вы можете создавать любые шрифты из ваших иконок для различных проектов.

Поделиться:

Об Авторе

Редакция портала WebDesignMagazine.ru -онлайн журнал о веб-дизайне.

  • Disqus

    Полученные шрифты плохо работают в опере, хроме и пр., кроме FF.

  • Mavr

    Даже не скачивается ((