Как подключить и использовать шрифтовые иконки с помощью IcoMoon

В веб-дизайне и при создании сайтов каждый использует иконки.
Популярность Font Awesome в создании интерфейса сайта врядли кто-то будет оспаривать,
но бывают ситуации что создали небольшой лендинг (2-3 экрана) и нужно вставить пару иконок социальных сетей Facebook, Twitter, Instagram.Я считаю подключение Font Awesome для 3 иконок будет неразумно.
Есть несколько мощных инструментов, таких как IcoMoon которые упрощают процесс и конвертируют векторные иконки в веб-шрифты.
Давайте попробуем выбрать с его помощью несколько нужных нам символов и “прикрутим” их к нашему проекту.
Для этого переходим по адресу, на котором расположен сервис IcoMoon и переходим на нем в раздел Application

icons

Далее выберем необходимые иконки.

icons

Когда нужный набор иконок выбран,
переходим вниз страницы и нажимаем кнопку внизу Generate Font (нижняя кнопка справа).
Откроется промежуточное окно, в котором представлен список всех выбранных для скачивания иконок и их характеристики.

icons

Здесь также можно отредактировать необходимые иконки — название, код и так далее.

web icons

Если все устраивает, нажимаем кнопку Download, чтобы скачать выбранный набор в виде архива.
После распаковки архива нам потребуется папка с именем fonts и style.css.

iconfiles

Директорию со всем ее содержимым просто перекидываем в проект, а файл style.css открываем в HTML-редакторе,

icons

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

iconstyle

Вот мы и познакомились со шрифтовыми иконками с помощью сервиса IcoMoon. Оказалось просто и приятно в работе

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *