Рассмотрим как самостоятельно сделать шрифтовой icon pack и подключить шрифт к проекту.
При верстке сайта мы используем только векторные иконки svg, потому что на дисплеях они отражаются более гладко и красивее чем растровые иконки png.
Например, если дизайнер нам не предоставил svg иконки, необходимо их самому сделать векторными svg формата.
Для этого подойдет программа inkscape.
Допустим есть три иконки png формата.
Устанавливаем программу с сайта inkscape под вашу операционную систему.
Открываем каждую png иконку в inkscap.
Выполним три обязательных действия с иконкой в inkscap
- В верхнем меню нажимаем контур и выбираем векторизировать растр. Откроется окно, в нем сделаем настройки параметров. Уберем галочки сгладить и сложить стопкой, установим убрать фон. Сканирование делаем два. Режим цвет, смотрим предпросмотр и нажимаем ок. Появится вторая иконка поверх основной. Смещаем ее в бок и удаляем иконку, которая была.
- Следующая настройка открываем меня файл выбираем свойства документа и нажимаем подогнать изображение под размер страницы. Размер окна стал таким же как у изображения.
- Третьим действием переходим в файл выбираем подчистить документ. Этот пункт обязательный.
Теперь можно сохранить новую иконку, главное выбрать простой.svg.
Делаем такую процедуру с оставшимися png иконками и закрываем программу inkscape.
Переходим на сервис fontello
С помощью сайта fontello генерируем наш web font или шрифтовых иконок.
Мы выбираем все наши svg векторные иконки и перетаскиваем на сайт fontello.
Выбираем все иконки.
Задаем имя проекта, например, myfont и нажимаем download.
Распаковываем в папку libs нашего проекта.
Посмотреть названия можно открыв demo.html внутри icon pack.
Подключаем новый шрифт
Подключаем myfon.css в файле libs.sass, также как подключаем шрифт fontawesome.
Пишем див с тремя тегами a ссылками и тегом I, с классами в, которых мы вставляем название иконок.
Проверяем в браузере.
