TIL Icon Fonts being the suckfest that they are

POSTED ON: Sep 28, 2022

I hate font icons.

In 99% of all use-cases, SVGs are better.

Now to add that 0.9% more (to make it 99.9%), SVGs are also much more accessible.

For example:

<img class="lightbulb" alt="Lightbulb moment!" src="https://upload.wikimedia.org/wikipedia/commons/2/2b/BulbIcon.svg">

Boom! Alt text + SVG, it's a freakin' win.

Try using the lightbulb font form font-awesome.
https://fontawesome.com/icons/lightbulb?s=solid&f=classic

<i class="fa-solid fa-lightbulb"></i>

Way to go. You made this inaccessible.

By the way, if you're using Font Awesome, switch to the SVG Sprites.
https://fontawesome.com/v5/docs/web/advanced/svg-sprites

Related TILs

Tagged: accessibility

TIL aria-expanded for showing when things are hidden/shown

The aria-expanded attribute is set on an element to indicate if a control is expanded or collapsed, and whether or not its child elements are displayed or hidden.

Oct 31, 2022

TIL ARIA role presentation

Think of this as a reset. You use role=presentation to remove semantic meaning from an element.

Sep 30, 2022

TIL reduce-motion-blur

Dizziness and vertigo are symptoms of a vestibular balance disorder. If the user has set up a user preference that they prefer motion-based animation be disabled/reduced, we can tap into that. As web developers, we can also support them.

Sep 29, 2022