Создаем собственный шрифт из иконок для сайта


Создаем собственный шрифт из иконок для сайта

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

Создаем собственный шрифт из иконок для сайта

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

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

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

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

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

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

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

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

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

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

 

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

Источник: webdesignmagazine.ru

Previous Что такое API Уведомления и как их использовать
Next Звездные войны в CSS

Suggested Posts

Оптимизация кода сайта для начинающих

Свежие и бесплатные шаблоны для OpenCart 2.0.x

Woocommerce — плагин интернет магазина версии 2+

Хаки wordpress. Топ 10

Оптимизация блога под поисковые запросы

Как получить первые 10 тиц