Шрифт из иконок (icon font)

Как сделать собственный иконочный шрифт (icon font)

автор: .aave. страница автора

Be the first to comment! Интернет Вторник, 23 Сентябрь 2014

Раньше при создании сайтов приходилось использовать растровые иконки. Это было красиво, но неудобно по целому ряду причин. Сегодня на место растровых иконок пришли векторные иконки. Это оригинальное и изящное решение, которое украсит и освежит ваш сайт.

Инструкция по созданию шрифта из иконок (Icon Font)

1Регистрация на сайтепроекта "Fontastic"

Существует хороший веб-сервис для создания шрифтов из иконок. Называется он "Fontastic". Он полностью бесплатен и без рекламы.

Логотип Fontastic — Логотип проекта "Fontastic"

Первым делом зарегистрируемся на сайте сервиса. Заходим на сайт проекта "Fontastic", вводим в поле ввода свой электронный адрес и придумаем пароль. Далее жмём большую жёлтую кнопку Create your Icon Font. Иногда случается, что никакая информация, подтверждающая успешную регистрацию, не выводится. Не волнуйтесь об этом. Нажимайте на кнопку Login, расположенную в верхнем правом углу.

Регистрируемся на сайте проекта "Fontastic"

На открывшейся странице снова вводим свой e-mail и пароль и нажимаем кнопку "Login". Через несколько секунд откроется панель для создания шрифтов из иконок.

Входим в свою учётную запись на сайте проекта "Fontastic"

2Создание набора иконокдля шрифта

Перед вами большой выбор иконок. Кликая на понравившиеся иконки мышью, выберите столько иконок, сколько вам нужно. В верхней части после слова PUBLISH в кружочке указывается количество выбранных иконок.

Выбираем нужные иконки в набор иконок для шрифта

Если вами не хватает иконок из представленного количества, пролистайте страницу до низа и найдите кнопку с надписью ADD MORE ICONS. Нажмите на неё.

Откроется страница с дополнительными пакетами иконок. Некоторые из них платные (помечены лейблом "Premium"), некоторые бесплатные. Для активации дополнительных иконок нажмите кнопку ACTIVATE на выбранных пакетах. Теперь, когда вы перейдёте в начало работы с панелью управления, нажав на кнопку "Home" в верхнем меню, дополнительные иконки появятся в общем списке доступных иконок.

Если вам нужно добавить собственные иконки, то на этой же странице вверху справа нажмите на кнопку IMPORT ICONS. Теперь вы можете загрузить свои собственные иконки. Обратите внимание, что поддерживается только векторный формат SVG.

Добавление собственных иконок в иконочный шрифт

3Настройка параметровиконочного шрифта

Выбрав нужное количество иконок, нажимаем кнопку CUSTOMIZE. Здесь вы увидите все выбранные иконки, и можете присвоить произвольные названия классов, по которым вы будете обращаться к ним в CSS стилях. Или можете оставить названия по умолчанию, которые присвоила иконкам система.

Присваиваем иконкам названия CSS-классов

4Публикация своегошрифта из иконок

Нажимаем кнопку PUBLISH. Откроется страница возможностей по загрузке иконочного шрифта. Нажимаем кнопку DOWNLOAD и скачиваем на компьютер архив с иконочным шрифтом. Также здесь можно опубликовать шрифт в облако шрифтов, если нужно (жёлтая кнопка "Publish").

5 Использование шрифта из иконокна своём сайте

В скачанном архиве находится CSS-файл стиля, HTML-файл с именами классов иконок и папка fonts со шрифтами. Этот иконочный шрифт теперь можно использовать на своём сайте.

Пакет с иконочным шрифтом, созданный сервисом Fontastic — Пакет с иконочным шрифтом, созданный сервисом "Fontastic"

Чтобы использовать созданный иконочный шрифт, нужно сделать следующее.

Распаковать содержимое архива и загрузить на свой сайт в директорию со стилями.
Вставить ссылку на CSS-файл в раздел HEAD всех страниц сайта, которые будут работать с этим иконочным шрифтом.
В коде страницы используем имя созданных ранее классов для использования иконочного шрифта, как показано на иллюстрации: