Cascade FallsISSUE #30 of 33

icon fonts · @font-face icon kits

StylaVSThe Specificity Sphinx

Styla saysIcon fonts and (better) inline SVG provide scalable icons styled with CSS.

Icon fonts map glyphs to characters so icons inherit color and font-size like text. They're easy but have accessibility quirks. The modern preference is inline SVG icons — crisp, styleable with fill, and no extra font request. Lean SVG for new work.

Power-ups you unlock

Icon fonts: glyphs sized/colored like text
Inline SVG: crisp, styleable via fill, accessible
SVG avoids an extra font download
Add aria-hidden or a label for icon meaning

The Specificity Sphinx attacks — common mistakes

Icon fonts read as random glyphs by screen readers
Forgetting aria-hidden on decorative icons
Loading a 1000-icon font for three icons

Boss battleDrop in an inline SVG icon, color it with CSS fill, and size it.

Example code

<!doctype html><html><head><meta charset="utf-8">
<style>.ico{width:32px;height:32px;fill:#b388ff}</style></head><body style="background:#06040d;padding:20px">
<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z"/></svg></body></html>

▶ Open the interactive comic issue

‹ Font-Display · Swap · Fallback · Optional Links · The Four States · Hover · Visited · Active ›