Font awesome: добавляем свои иконки

На сегодняшний день в сети полно различных «иконочных» шрифтов, при помощи которых можно легко добавлять иконки на своих сайтах.
Навигация по статье:

1. Что такое Font Awesome
2. Способы добавления своих иконок
3. Работа с сервисом Icomoon
4. Публикация готового сета иконок Iconmoon на сайте
5. Как обновлять ваш сет с иконками в будущем
6. Заключение

Что такое Font Awesome

Font Awesome — шрифт и CSS-инструментарий, предназначенный для размещения множества векторных, легко настраиваемых иконок на своих сайтах.

Таблица иконок Font Awesome

Все, что можно настраивать при помощи CSS — можно применить к иконкам Font Awesome на Ваших проектах. Одним из важнейших преимуществ этих шрифтов — четкое и красивое отображение при различных размерах. Если обычная png-иконка с прозрачным фоном или еще хуже jpg-иконка при увеличении будет выглядеть не очень красиво (появятся эффекты размытия, нечеткость), то иконка в виде шрифта сохранит идеальное качество. Вместе с этим, как в любом шрифте заранее предопределен список символов, так и в Font Awesome заранее предопределен список готовых, отобранных из наиболее часто нужных иконок.

Способы добавления своих иконок

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

Сложный способ редактирования Font Awesome

1. Форкните репозиторий Font Awesome. Вам понадобится правильно настроенная среда разработки.
2. Хакните файл с шрифтом FontAwesome.otf. Вы можете использовать эту инструкцию: создание Octicons (на английском).
3. Поделитесь своей веткой с сообществом Font Awesome. Проверьте наличие открытых проблем, связанных с вашей веткой, и поделитесь своим репозиторием.

Простой способ внесения изменений в Font Awesome

Существует несколько онлайн сервисов, позволяющих кастомизировать Font Awesome. Вот наиболее популярные:

• Fort Awesome: https://fortawesome.com/ (от @davegandy, создатель Font Awesome) — Платный сервис, от создателя Font Awesome, пробный период — 14 дней.
• Fontello: http://fontello.com/ — Бесплатный сервис, удобный если вам нужно один раз изменить набор своих иконок.
• IcoMoon: http://icomoon.io/app/#/select — Онлайн сервис, который представляет много различных возможностей с редактированием и добавлением иконок. Бесплатный.
• Fontastic: http://fontastic.me/ — Еще один сервис, есть возможность генерации svg спрайтов, есть регистрация и управление вашими шрифтами. Бесплатный.

Вы можете использовать любой из предложенных, это быстро и просто. Лично я рекомендую IcoMooon. Последнее время пользуюсь именно им и в этой статье я опишу как использовать IcoMoon детальнее.

Добавление иконок через Icomoon

IconMon — онлайн сервис для создания собственных шрифтов из иконок для использования на сайтах или в мобильных и дектопных приложениях. Допустим у вас подключен Font Awesome, а вам нужно добавить иконки из других шрифтов или вообще свою собственную иконку с вашим логотипом. Для этого вы создаете новый проект в IconMon, импортируете в него Font Awesome шрифт, если нужно то другие шрифты или свои иконки в виде шрифтов/svg картинок. Затем вы скачиваете получившийся шрифт и используете в своем приложении вместо Font Awesome. Ниже я покажу как это делать пошагово.

IconMon: начало работы

• Заходим на сайт сервиса iconmon.io и жмем кнопку IcoMoon App
• При запуске IconMon вы попадете на экран управления проектом. В нем по дефолту уже будет список бесплатных иконок, которые нам предлагает IconMon. Так как наша задача была в том,
  чтобы обновить шрифт Font Awesome, то первое что мы сделаем — это импортируем его в IcoMoon.
  1. Жмем кнопку Import Icons (в верхнем левом углу) и выбираем файл fontawesome-webfont.svg из папки шрифтов, которую вы использовали ранее.
  2. Отлично. После того, как мы добавили Font Awesome, загрузим и свою собственную иконку в svg формате тем же способом (Import Icons).
  3. Теперь все необходимые иконки и наборы иконок загружены в систему мы можем по необходимости их немного исправить или просто изменить. Для этого в верхнем меню управления переключите режим с «Select» на «Edit» и выберите иконку в таблице иконок. При редактировании можно выполнять следующие операции: Разворот/Отражение иконки (Rotate), Масштабирование (Scale), Выравнивание (Align), Цвет (Color).
  4. После редактирования (если оно было необходимо) и загрузки нужных иконок в IconMon нам нужно отметить те, которые будут в нашем новом шрифте. Для этого в верхнем меню выбираем (если не выбрано) Select и отмечаем нужные иконки. Также Вы можете выбрать сразу весь набор. У нас есть загруженный набор Font Awesome — справа от заголовка набора нажимаем на кнопку управления и выбираем Select All. Не забываем отметить нашу собственную иконку.
  5. В нижнем правом углу экрана нажимаем Generate Font. После нажатия мы попадем на экран просмотра шрифта, который мы создали. На этом экране можно указать или исправить названия иконок. Также обратите внимание, на дополнительные опции рядом с кнопкой Download. В этих опциях можно указать название, различную мета-информацию и указать способ, которым иконки будут вставляться у вас на сайте. Также можно указать версию шрифта.
  6. Убедившись, что все нужные правки созданы, нажимаем на кнопку Download и скачиваем новый шрифт.

Публикация готового сета иконок Iconmoon на сайте

Скачав архив вы можете подключить его на своем сайте вместо Font Awesome и использовать иконки уже из этого набора, включая вашу собственную иконку. Для подключения на сайте нам понадобятся файлы из папки fonts и style.css — заливаем их к себе на сайт (при необходимости style.css можно переименовать или вообще добавить контент из него в свой css файл, который был использован на сайте ранее). Обратите внимание, что разместив font и css у себя на сайте относительный путь к шрифтам в css файле мог изменится. По этому откройте уже загруженный на ваш сайт css код и убедитесь, что к шрифтам прописаны верные пути. Вот тут я красным выделил место, где нужно проверить пути.

@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?29mi8v');
src: url('fonts/icomoon.eot?29mi8v#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?29mi8v') format('truetype'),
url('fonts/icomoon.woff?29mi8v') format('woff'),
url('fonts/icomoon.svg?29mi8v#icomoon') format('svg');
font-weight: normal;
font-style: normal;

После успешного переноса файлов iconmon на сайты использовать иконки можно таким образом:

<a href="#">
<span class="icon-home"></span>
Домой
</a>

Как обновлять ваш сет с иконками в будущем

Итак, мы успешно создали, подключили и используем свой кастомизированый шрифт Iconmon, в которому у нас и свои иконки и Font Awesome и любые другие. Мы хорошо поработали при генерации этого шрифта, долго прописывали названия к иконкам, выставляли цвета, вертели их редактировали. А теперь у нас появилась еще одна новая иконка и мы хотим ее добавить в этот наш шрифт. Iconmon предлагает 3 варианта решения этой задачи:

1. Хранение ваших проектов в облаке Iconmon — это платная услуга. При регистрации в Iconmon можно выбрать подписку, оплатить ее и ваши проекты шрифтов будут храниться в вашем аккаунте. Вы всегда сможете изменить их, поставить версию выше, скачать и использовать.
2. Если вы не чистили кэш браузера, то ваши проекты также останутся при повторном заходе на IconMon и вы сможете легко добавить новую дополнительную иконку в ваш проект и сохранить себе обновленный шрифт. Главная проблема в том, что после того, как вы почистите кеш в браузере, все это будет удалено.
3. Настройки проекта в файле selection.json — наиболее подходящий вариант для нас. Во-первых — это бесплатно. Этот файл вы скачиваете в архиве со шрифтом каждый раз, когда генерируете его.
   Просто храните этот файл и в будущем можно будет заходить на IconMo и импортировать ваши проекты через него.

Заключение

Возможно есть и более удобные способы добавления своих иконок в Font Awesome, но они или платные или требуют более глубоких технических знаний. Этот же способ с использованием IconMon — прост, бесплатен и достаточно удобен. Если у вас появились какие-нибудь сложности, то добро пожаловать в комментарии. С радостью помогу.