or, a Quick PSA on icon fonts and ligatures.
tl;dr: keep using icon fonts, they are nice, just enable ligatures
These are my talking notes at the http://wwweeklies.com/ on 2015-12-04:
- This Seriously, Don’t Use Icon Fonts post came out
- This I agree with: SVG is really nice for the Web
- This I disagree with: icon fonts are bad for the Web
- This is how icon fonts traditionally work
- Private-use area of unicode
<i class="fa fa-search"></i>- Really crappy failure mode
- Ligatures
- As usual, A List Apart was on this years ago
- Rendering
fffor example - This explains it perfectly
- Browser support is really good (before anyone asks: >= IE 10)
- This is how ligatures work
<i class="material-icons">search</i>- Beautiful failure mode
- BTW, try
Cmd + F"delete" :)
- Rendering works differently across browsers, tl;dr:
- Safari waits for the font to load with blank placeholder
- Chrome and Firefox wait up to 3 seconds with blank placeholder, then render with a fallback font (and of course eventually re-render with the correct font)
- IE immediately renders with the fallback font (and eventually with the correct one)
- But SVG's are good too!
- Actual imagery, with multiple colors and whatnot
- Complex animations and interactions
- How do you get this?
- e.g. Google's Material Icons
- e.g. IcoMoon allows you to customize your ligatures
- And keep in mind if you're already using e.g. ARIA you're already Doing It Right (tm) and you can use whatever you want for your icons
