Как создать собственные иконки с помощью сервиса Fontello?

Question

[Егор Трубников-Панов]

Столкнулся с тем, что мои иконки на Windows системах полностью закрашены черным.
Такие черные кругляшки. Хотя должно быть бублики со стрелочками.
Что не так делаю?

Вот такая svg иконка например: jsfiddle.net/dP7wc
Если перейти по этой ссылочке, то выглядит она нормально. А если ее добавить через Fontello в шрифт то будет черным кругляшком.
Похоже, xml-структуре файла чего-то не хватает для определения дырки.
Но я не знаю чего.
Делаю через редактор Sketch, в нем все ок. В Хроме на Маке тоже все ОК.

fontello.com

Comments

[Юрий Лобанов]

У меня иконка из примера нормально выглядит. win7

[Егор Трубников-Панов]

@iiil Если перейти по этой ссылочке то выглядит она нормально. А если ее добавить через Fontello в шрифт то будет черным кругляшком.

Answer 1

[Юрий Лобанов]

Вспоминаю, что была такая проблема. А Вы другой сервис использовать пробовали? icomoon.io/, например?

Comments

[Егор Трубников-Панов]

предложеный вами сервис сразу показывает черные кругляшки.
Не думаю что проблема в сервисе. Думаю проблема в SVG что-то неправильно в разметке.

[Юрий Лобанов]

@EAT ну я закинул в редактор (в CorelDRAW) - отображается нормально.

Answer 2

[sumyuga]

тоже такая же фигня, не могу из скетча нормально загрузить в icomoon svg-иконку, в Illustrator'е тоже срабатывает заполнение и не работает substracting.
Слышал что вроде как проблема в свойстве fill-rule="evenodd" оно не работает и должно быть fill-rule="nonzero", но у меня и так не заработало.
Блин, я уже голову всю сломал и не знаю как быть, надо срочно добавить в иконочный шрифт пару своих кастомных svg

Answer 3

[DaBudet]

может поможет это
https://github.com/fontello/fontello/wiki/How-to-u...