littleguga
@littleguga
Не стыдно не знать, а стыдно не интересоваться.

Как добавить иконки к уже встроенному шрифту?

Есть шрифт, собранный с помощью fontello и встроенный в css через
@font-face {
    font-family: 'icons';
    src: url('data:application/octet-stream;base64,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') format('woff'),
}

Нужно добавить туда еще пару иконок - как это сделать?

Заранее благодарен за информативный ответ!
  • Вопрос задан
  • 587 просмотров
Решения вопроса 1
copist
@copist
Empower people to give
Простой путь
Фонтелло умеет добавлять иконки. Посмотри их API, у них есть утилита на github и веб-интерфейс.

https://github.com/fontello/fontello#developers-api
https://github.com/fontello/fontello

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

Джедайский путь
1. записать файл icons8.woff.b64 такого содержания:
d09GRgABAAAAABaUAA4AAA ..... много буков ..... /9YNLL0bmRhcAAfTIrgAAAA=

2. распаковать из формата base64
php -r '$file = file_get_contents("icons.woff.b64"); file_put_contents("icons8.woff", base64_decode($file));'


3. полученный файл шрифта icons8.woff с помощью https://everythingfonts.com/woff-to-svg сконвертировать в шрифт в формате SVG
4. полученный файл c шрифтом в формате SVG icons8.svg с помощью https://github.com/icons8/svg-caster преобразовать в кучу SVG файлов-иконок
5. добавить свои файлы-иконки в формате SVG
6. с помощью fontello.com создать веб-шрифт из этого набора файлов-иконок

НО
А. Коды символов изменятся, в вёрстке иконки могут оказаться не на своих местах оказаться, если в HTML вставляются через коды, а не имена классов.
Б. Иконки надо согласовать по размерам, чтобы новые две не выглядели воронами. Пригодится редактор Inkscape или Adobe Illustator
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы