What's wrong with icon fonts
There are several problems with icon fonts. My biggest problem is that I see a box with F104
in it where there ought to be a picture, because I have web fonts disabled (for the same reason I use pi-hole; most of the time, web fonts are a waste of time and they're in the critical path for rendering the page).
You're also sending a file with hundreds of icons in them, and only using about 30 of them. I've seen far more egregious cases, but it's still not great.
How to fix this
There are basically three ways to try to fix this:
-
Font Awesome JavaScript + SVG is a drop-in replacement for what you're using now.
-
Inline SVG is what a lot of sites have been switching to. This is a very popular choice: it's what GitHub does. I'm not sure if it's what you want, since you actually have quite a few icons, but it would work.
-
SVG sprite (that is, an SVG with figures and xlink). This is what Discourse does does, and it's actually supported by Font Awesome.