Why didn't svg icons get assembled into a font?

Question

JavaScript

I use webpack and fontgen-loader, as a result of the assembly css comes out with styles like

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

and even a font is generated, but in the end, instead of an icon, I see either just a black frame (as if the problem is in the encoding), or nothing at all, just an empty block. I don't even know what to think.
What bundlers do you use on webpack, maybe you should try another one?

Answer 1

Symbols for font generation should be simplified as much as possible by Adobe Illustrator or Inkscape.
In your case - most likely a black element is on top of a white square or a transparent square. Open the file, delete this box.
The answer is sponsored by Icons8 service 30,000+
icons in 6 styles, for free, in any color and size + editor + font generator
I'll help you figure it out. Please attach in the question or in the comments a few problematic icons and a ZIP with the result of the generation (CSS, TTF/OET/SVG/WOFF/WOFF2 files) and an HTML page with attached style files with a fragment where these symbols are used.