Август 2017
Автор: Рубрика: Верстка Комментариев нет

Делаем свои векторные иконки для сайта icon pack

Делаем свои векторные иконки для сайта icon pack

Рассмотрим как самостоятельно сделать шрифтовой icon pack и подключить шрифт к проекту.

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

Например, если дизайнер нам не предоставил svg иконки, необходимо их самому сделать векторными svg формата.

Для этого подойдет программа inkscape.

Допустим есть три иконки png формата.

программа inkscape делаем векторные иконки svg

Устанавливаем программу с сайта inkscape под вашу операционную систему.

Открываем каждую png иконку в inkscap.

Выполним три обязательных действия с иконкой в inkscap

  1. В верхнем меню нажимаем контур и выбираем векторизировать растр. Откроется окно, в нем сделаем настройки параметров. Уберем галочки сгладить и сложить стопкой, установим убрать фон. Сканирование делаем два. Режим цвет, смотрим предпросмотр и нажимаем ок. Появится вторая иконка поверх основной. Смещаем ее в бок и удаляем иконку, которая была.
  2. Следующая настройка открываем меня файл выбираем свойства документа и нажимаем подогнать изображение под размер страницы. Размер окна стал таким же как у изображения.
  3. Третьим действием переходим в файл выбираем подчистить документ. Этот пункт обязательный.

Выполним три обязательных действия с иконкой в inkscap

Теперь можно сохранить новую иконку, главное выбрать простой.svg.

Делаем такую процедуру с оставшимися png иконками и закрываем программу inkscape.

Переходим на сервис fontello

С помощью сайта fontello генерируем наш web font или шрифтовых иконок.

Мы выбираем все наши svg векторные иконки и перетаскиваем на сайт fontello.

Выбираем все иконки.

Задаем имя проекта, например, myfont и нажимаем download.

Переходим на сервис fontello делаем icon pack

Распаковываем в папку libs нашего проекта.

Посмотреть названия можно открыв demo.html внутри icon pack.

Подключаем новый шрифт

Подключаем myfon.css в файле libs.sass, также как подключаем шрифт fontawesome.

Пишем див с тремя тегами a ссылками и тегом I, с классами в, которых мы вставляем название иконок.

Проверяем в браузере.

Подключаем новый шрифт icon pack к сайту

Комментариев нет

Комментарии:

Комментарии запрещены