TIL Switching to SVG for Icon Fonts

POSTED ON: Mar 05, 2021

The introduction of the @font-face CSS at-rule allowed web designers to specify custom fonts with which to display text. By 2011, all major browsers supported it. This gave birth to the idea that fonts composed of pictograms, like Wingdings, could be used in place of raster images on the web. Considering that real SVG support across all major browsers didn't become stable until early 2020, icon fonts were the defacto way to add vector-based icons on your web site.

But icon fonts on the web were fundamentally flawed from the beginning. And now, with full SVG support at our disposal, it's time to put a stop to their use, once and for all.

Overall - I'm still on the fence about this.

I like using fontAwesome's font-face because it's pretty straighforward.

Call the font-family
Call the glyph content ID
DONE

CONS:
You are using hacks like letter-spacing and line-height to modify sizing.

In one project, I did switch to SVGs, and it was really nice to use a lot of modern CSS designs to make it fit.

But, I'm not ready to switch over just yet.

REF:
https://www.irigoyen.dev/blog/2021/02/17/stop-using-icon-fonts/

Related TILs

Tagged: css

TIL the alternate keyword

If 'alternate' appears along with the stylesheet keyword, the linked file is an alternative stylesheet. It won’t be applied to the document, but it will be ready for when we need it.

Mar 18, 2023

TIL Logical Properties

For that sweet sweet Internationalization you want to avoid directional words like 'left', 'right', 'top', and 'bottom'.

Mar 11, 2023

TIL Using pseudo-classes in your querySelector!

let notTuna = document.querySelectorAll('.sandwich:not(.tuna)')

Mar 02, 2023