Почему не собрались svg иконки в шрифт?

Question

[Ленар Фаттахов]

Использую webpack и fontgen-loader, в итоге сборки выходит css со стилями типа

.ai-chat_a:before {
	content: "\F103";
}

и даже генерируется шрифт, но в итоге вместо иконки вижу то просто черную рамочку(как будто проблема в кодировке), то вообще ничего, просто пустой блок. Даже не знаю, на что думать
Какими сборщиками вы пользуетесь на webpack, может стоит попробовать другой?

Answer 1

[Слава]

Сам файл шрифта подключил?

Comments

[Ленар Фаттахов]

Да, в sources (chrome dev tools) даже отображается

Answer 2

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

Символы для генерации шрифта должны быть максимально упрощены силами Adobe Illustrator или Inkscape.

• Должен быть только один путь или другой примитив, без пересечений
  
• Один цвет, любой
  
• Без градиентов, клипов, анимации, текста, скриптов
  

В твоём случае - скорее всего элемент чёрного цвета находится поверх квадратика белого цвета или прозрачного квадратика. Открой файл, удали этот квадратик.

Спонсором ответа является сервис Icons8
30 000+ иконок в 6 стилях, бесплатно, в любом цвете и размере + редактор + генератор шрифтов

Я помогу разобраться. Приложи, пожалуйста, в вопросу или в комментариях несколько проблемных иконок и ZIP с результатом генерации (CSS, файлы TTF/OET/SVG/WOFF/WOFF2) и страницу HTML с подключенными файлами стилей c фрагментом, где используются эти символы.