Icons with character
A lot of designs use icons these days, traditionally you would use images to place them within your design. Another approach we like to show you here is using unicode characters or a dedicated icon web-font.
How does it work?
By using a unicode character that is already available on the user's system we don't need to download any assets to display the icon. Look up the symbol/icon you want by using a tool like Copy Paste Character and just paste it in your HTML (make sure you've set your HTML to have UTF encoding, but you already did that, right?).
The second technique with the web-font is just as simple: embed the font, find out which character corresponds to what icon and use the font and the character to display the icon.
Pro's and con's
The mentioned techniques have one big advantage, icons used this way are vectors and therefore are scalable without having problems with a visible pixel-grid.
There are some drawbacks though.
- Font's are monochromatic by definition so no icons with multiple colors
- Unicode characters differ (the os x one looks quite different than the windows 7 one)
- Unicode characters may not be supported on older browsers
- Webfonts with icons mapped to real character are semantic nonsense
- Webfonts with icons mapped to real character have no fallback if the font fails (same goes for unicode characters if they are not supported)
Show us the source!
Feel free to look around the different source files we used for this example.