Свой иконочный шрифт из svg иконок

Рубрики CSS, HTML, Дизайн

Сказка ли? Нет, к тому же это очень удобно, быстро, масштабируемо и кроссбраузерно.

Инструкция любезно предоставлена мне моим другом и коллегой Антоном Яценко.

Создаем свой собственный иконочный шрифт используя svg-иконки.

Ресурс: https://icomoon.io

  1. Идешь в приложение http://joxi.ru/EA417L1TLglxrb
  2. Импортишь свои иконки с компа http://joxi.ru/Vm6zqZzTOwNkmZ
  3. Они все должны быть выделены (об этом свидетельствует цвет фона, на котором они находятся. На белом фоне — иконка выделена, на сером — Не выделена.) Таким образом в итоговом файте шрифта окажутся только те, которые были выделены http://joxi.ru/Q2K4Jz4in5k6Aj
  4. Переходишь в создание файлов шрифта http://joxi.ru/zAN4Ez4iQ47Dm9
  5. Здесь имеет смысл указать нужные имена иконкам, чтобы было проще в них ориентироваться.. (из данных имен будут сгенерированы соответствующие классы, которые ты будешь использовать для добавления иконок в размету) http://joxi.ru/MAjJYEJUn0yRAe6

А при нажатии на саму иконку (рядом с названием) http://joxi.ru/YmEYRzYudNXjm6.

Открывается окно с доступом к самой иконке, в котором ты можешь кое-что понять (цвет, размер, положение во фрейме и т.п. ) http://joxi.ru/bmodZEdiaVbW2y.

Перед генерацией файлов, стоит открыть настройки и выставить оптимальные значения http://joxi.ru/xAeEzgEF3oy4Ay.

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

Такие настройки у меня всегда http://joxi.ru/nAyQEvQU8pLYAZ.

Здесь отмечено, что ты будешь вставлять иконку в разметку тегом <i>.

Затем качаешь http://joxi.ru/V2VpQbpTp9QDrv
Нужны только файлы шрифта http://joxi.ru/l2ZMa4MfKp14mJ и код из файла для подключения в проект http://joxi.ru/nAyQEvQU8p6YAZ.

Вот так используешь http://joxi.ru/KAg0vg0c1pPOrl.

Для использования данной иконки как псевдоэлемент в свойстве content используешь ее уникальный юникод http://joxi.ru/MAjJYEJUn09NAe.

Примечание: все элементы в svg, по возможности, должны быть только в path, а не polygon, line, rectangle или что-то еще и линии в виде заливок (или обводок, точно не помню).