[Модификация] Создание и использование собственной сборки шрифтов.
Добавлено: Чт май 10, 2018 6:47 pm
В своем интерфейсе последнее время пришел к выводу, что используемые картинки преимущественно однотонные. Приходилось искать эти самые картинки (иконки) на просторах интернета.
Столкнувшись с использованием шрифта "Font-awesome", задумался, а почему не перевести свои используемые картинки в такой же шрифт. Полазив по тем же сайтам, понял, что это очень даже реально! Картинки предлагают скачать в разных форматах, меня же интересует SVG формат. Скачиваю заинтересовавшую картинку, загружаю на ресурс "Fontello", скачиваю шрифты и использую в своем проекте. Причем поправив стили шрифта, получил все те же возможности, что предоставляет шрифт Font-awesome. Однако наш шрифт оказывается легче, имеем в нем только используемые иконки. Страницы нашего проекта (меню, сцены) загружаются быстрее, и расходуют меньше мобильного трафика. Так как стало меньше картинок.
Вот настройка и проверка работы шрифта.
Предлагаю вам поучавствовать в пополнении шрифта. Предлагаем необходимые, используемые вами иконки в формате SVG.
Для использования шрифта скачиваем и распаковываем, желательно в папку "templates_alt", т.к. в дальнейшем возможно будет установка с маркета дополнений.
Прописываем в местах использования путь к файлу "fontello.min.css"
Далее используем код для вставки в html, php. Пример для "icon-2":
Стили для шрифта используем такие же, как и для "Font-awesome". Сделано это для мягкого перехода на наш шрифт. Запустите файл "Test_fontello.html" увидите пример применения стилей.
В файле "demo_all.html" показаны все иконки задействованные в данном шрифте.
Иконочный шрифт: Продолжение следует...
Столкнувшись с использованием шрифта "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" показаны все иконки задействованные в данном шрифте.
Иконочный шрифт: Продолжение следует...