Столкнувшись с использованием шрифта "Font-awesome", задумался, а почему не перевести свои используемые картинки в такой же шрифт. Полазив по тем же сайтам, понял, что это очень даже реально! Картинки предлагают скачать в разных форматах, меня же интересует SVG формат. Скачиваю заинтересовавшую картинку, загружаю на ресурс "Fontello", скачиваю шрифты и использую в своем проекте. Причем поправив стили шрифта, получил все те же возможности, что предоставляет шрифт Font-awesome. Однако наш шрифт оказывается легче, имеем в нем только используемые иконки. Страницы нашего проекта (меню, сцены) загружаются быстрее, и расходуют меньше мобильного трафика. Так как стало меньше картинок.
Вот настройка и проверка работы шрифта.
Предлагаю вам поучавствовать в пополнении шрифта. Предлагаем необходимые, используемые вами иконки в формате SVG.
Для использования шрифта скачиваем и распаковываем, желательно в папку "templates_alt", т.к. в дальнейшем возможно будет установка с маркета дополнений.
Прописываем в местах использования путь к файлу "fontello.min.css"
Код: Выделить всё
В html коде:
<link href="/templates_alt/fontello/css/fontello.min.css" rel="stylesheet" type="text/css"/>
или в css коде:
@import url('/templates_alt/fontello/css/fontello.min.css');Код: Выделить всё
<i class="fa icon-2"></i>
или
<span class="fa icon-2"></span>В файле "demo_all.html" показаны все иконки задействованные в данном шрифте.
Иконочный шрифт: Продолжение следует...