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

Question

[littleguga]

Есть шрифт, собранный с помощью fontello и встроенный в css через

@font-face {
    font-family: 'icons';
    src: url('data:application/octet-stream;base64,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') format('woff'),
}

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

Заранее благодарен за информативный ответ!

Answer 1

[Павел Волынцев]

Простой путь
Фонтелло умеет добавлять иконки. Посмотри их 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

Comments

[littleguga]

В том то и проблема, что нет архива. Есть только эта строка в css файле.

[Павел Волынцев]

littleguga: можно сконвертировать WOFF -> SVG

[littleguga]

Павел Волынцев: спасибо, посмотрю в эту сторону.

[littleguga]

Павел Волынцев: просто огромнейшее спасибо, что полное решение скинули! Добра Вам!

[Павел Волынцев]

littleguga: надеюсь хоть сработает, сам не прогонял, только по интуиции список составил

[littleguga]

Павел Волынцев: СРАБОТАЛО! Кстати, на шаге 4 можно уже файл просто перетянуть в форму на сайте fontello и дело в шляпе. Еще раз огромное Вам спасибо!