[Модификация] Создание и использование собственной сборки шрифтов.

Вносятся изменения в файлы или устанавливаются доп программы

Модераторы: immortal, newz20

Ответить
ahelper
Сообщения: 106
Зарегистрирован: Ср фев 08, 2017 5:04 pm
Благодарил (а): 34 раза
Поблагодарили: 66 раз

[Модификация] Создание и использование собственной сборки шрифтов.

Сообщение ahelper » Чт май 10, 2018 6:47 pm

В своем интерфейсе последнее время пришел к выводу, что используемые картинки преимущественно однотонные. Приходилось искать эти самые картинки (иконки) на просторах интернета.
Столкнувшись с использованием шрифта "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');
Далее используем код для вставки в html, php. Пример для "icon-2":

Код: Выделить всё

<i class="fa icon-2"></i>
или
<span class="fa icon-2"></span>
Стили для шрифта используем такие же, как и для "Font-awesome". Сделано это для мягкого перехода на наш шрифт. Запустите файл "Test_fontello.html" увидите пример применения стилей.
В файле "demo_all.html" показаны все иконки задействованные в данном шрифте.

Иконочный шрифт:
fontello_v1.2.zip
199 иконок
(543.7 КБ) 313 скачиваний
Продолжение следует...
Вложения
fontello_v1.2.zip
199 иконок
(543.7 КБ) 279 скачиваний
Последний раз редактировалось ahelper Вт май 15, 2018 12:57 pm, всего редактировалось 13 раз.
За это сообщение автора ahelper поблагодарили (всего 7):
lanket (Чт май 10, 2018 8:20 pm) • skysilver (Чт май 10, 2018 9:10 pm) • ypiter2006 (Сб май 12, 2018 5:07 pm) • Samir77 (Сб май 12, 2018 11:15 pm) • Logrus (Вс июн 10, 2018 5:30 pm) • Amarok (Ср авг 29, 2018 3:08 pm) • Sergey.Chek (Вт мар 31, 2020 9:27 pm)
Рейтинг: 8.14%
directman66
Сообщения: 2801
Зарегистрирован: Пн дек 26, 2016 9:51 am
Откуда: Екатеринбург
Благодарил (а): 380 раз
Поблагодарили: 693 раза
Контактная информация:

Re: Создание и использование собственной сборки шрифтов.

Сообщение directman66 » Пт май 11, 2018 1:47 pm

Вот тут мои мысли по этому поводу https://connect.smartliving.ru/profile/1502/blog75.html
Если вам помогло данное сообщение, не поленитесь нажать кнопку "спасибо".
CONNECT | Оборудование | Блог | Дополнения | Email | Telegram
Ander
Сообщения: 56
Зарегистрирован: Вс авг 27, 2017 9:20 pm
Благодарил (а): 7 раз
Поблагодарили: 0

Re: Создание и использование собственной сборки шрифтов.

Сообщение Ander » Ср июл 18, 2018 8:13 pm

немного не в тему, но все же может подскажите, как сделать шрифт в виде семисегментного индикатора типа liquidcrystal?
ahelper
Сообщения: 106
Зарегистрирован: Ср фев 08, 2017 5:04 pm
Благодарил (а): 34 раза
Поблагодарили: 66 раз

Re: Создание и использование собственной сборки шрифтов.

Сообщение ahelper » Чт июл 19, 2018 9:13 am

Ander писал(а):
Ср июл 18, 2018 8:13 pm
немного не в тему, но все же может подскажите, как сделать шрифт в виде семисегментного индикатора типа liquidcrystal?
Вот здесь посмотри Сцена Tablet Clock
Ответить