HTML5 and CSS3 Advent 2011

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.

Examples

Just a simple icon with the snowflake unicode symbol (❄).

Take your umbrella! It's raining unicode!

With :before you can put them in front of an item.

Attention! We're using unicode warning symbols!

Attention! We're using unicode warning symbols!

Different colors!
0 k
Custom webfonts aren't limited to the unicode character set (but may have some accessibility problems).

Lock it up!

With :before you can put them in front of an item.

Settings

Profile info

Different colors and other fancy css effects!

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.

Check out our all new HTML & CSS Advent 2012