Use SVG for icons instead of font

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.

Do you have the glyphs drawn in SVG for us?

You're using Font Awesome for these icons. The SVG version of them can be downloaded from here.

Also, a link to somebody's slide decks does not make for a constructive feature request. Please expand on what is currently wrong, why it's important, and what would be needed for change. Please do so by editing your original post to have a bit more meat to it.

Thanks

2 Likes