Векторные иконочные шрифты Iconmoon.

tsumbaluk.in.ua24 Сентябрь 2016

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

Итак, плюсы шрифтовых иконок:

  • Возможность практически бесконечного масштабирования без потери качества изображения, как на обычных экранах так и на Retina-дисплеях.
  • Стилизация изображения с помощью CSS. Размер, цвет, тень и т.д.
  • Позволяет анимировать.
  • Кроссбраузерная совместимость.
  • И конечно же нет запросов на сервер(что отлично сказуеться на оптимизации ваших страниц).

Стоит отметить несколько на мой взгляд не значительных недостатков:

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

Несколько готовых решений

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

Как создать уникальные иконки

Есть не один способ создания собственного шрифта. Я поделюсь одним из самых простых возможных вариантов.
Вот картинка с которой мы будем работать: погрузчик icon Итак нам необходимо иметь векторные изображения. Для этого берем интересующую нас картинку(желательно PNG) открываем с помощью Inkscape у вас это должно выглядеть следующим образом. Теперь нажмите Контур и в появившемся списке Векторизировать растр у вас откроется окно настроек
важным моментом является выставить соответственные параметры, итак:

  • Проходов:2
  • Серые тоны:галочку поставить
  • Сгладить:галочку убрать
  • Сложить:галочку убрать
  • Исключить тело:галочку поставить

нажать Обновить и потом Готово.
Inkscape
Векторное изображение покроет собой растр оттяните его и удалите растр. Осталось правильно сохранить вектор жмем Файл в открывшемся списке Параметры документа. В открывшемся окне настроек нас интересует размер документа

  • Единицы:px
  • Ширина:500
  • Высота:500

Inkscape Теперь для красивого отображения наша иконка должна занимать все возможное пространство документа разместите ее в верхнем левом углу документа и растяните так чтобы она не выходила за границы это должно выглядеть следующим образом Inkscape Теперь нажмите Файл Сохранить как в открывшемся окне введите название фала и отметьте формат Inkscape Осталось из наших векторных изображений сгенерировать шрифт переходим на IconMoon
нажимаем Import icons и выбираем наш SVG документ, кликнем по нему таким образом добавив его к выбранным иконкам,
затем Generate Font iconMoon Здесь вы можете переименовать ваши иконки и потом обращаться по этому имени в HTML. И скачать ваш шрифт. iconMoon В содержимом архива нас интересует файл style.css где прописаны пути к папке fonts и перечислены наши иконки в виде псевдоэлементов и папка fonts где и лежит наш шрифт. Копируем это все себе и подключаем. iconMoon Теперь если все подключено правильно наша иконка вставляется в HTML код:

<i class="icon-pog">

Вот результат icon-font result

Новое в блоге

Sass в примерах, основные синтаксические конструкции
tsumbaluk.in.ua || 26.11.2017

Sass в примерах, основные синтаксические конструкции

Бесплатный хостинг!
tsumbaluk.in.ua || 29.06.2017

Бесплатный хостинг!

e2e тестирование приложений. Используя Protractor
tsumbaluk.in.ua || 30.04.2017

e2e тестирование приложений. Используя Protractor

Modx Revo multilanguage babel
tsumbaluk.in.ua || 05.03.2017

Modx Revo multilanguage babel

Node package manager publish package
tsumbaluk.in.ua || 11.02.2017

Node package manager publish package

Modx перенос на сервер или туда и обратно
tsumbaluk.in.ua || 01.11.2016

Modx перенос на сервер или туда и обратно