HTML5 and CSS3 Advent 2011

December 2nd, 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!

0k
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.

Attribution

What's this?

We wanted to use all
the cool new features that CSS3 and HTML5 has to offer us,
but can't really use yet in our "real" work (well we can use some).
These pages are meant to be a showcase of what has yet to come.

We hope you get inspired by our examples and have as much fun playing with this stuff
as we had making it.