A little something on Icon Fonts for HTML prototyping

I've spent the last week looking at HTML prototyping. (I'll share more when I can). I've been putting together a list of font icon resources I thought I'd share.

Getting the real icons and making them quick and easy to add to the HTML is the challenge. Building a HTML prototype should be as easy as drawing a wireframe in Omnigraffle or pasting an image into the beast that is Axure.

It’s then as easy as adding:
[code language=”html”]<span class="zocial-twitter"></span>[/code]

And getting

Maki is a great map based icon set from Mapbox. A series of activity based icons.

Zocial is wonderful little social icon font. Stylish and simple.

Fontello is also great for building your own bundles of icons from various icon font families. We’ll use it to build one set of icons out of the various families.

I’ve been trialling the great we love icon service. You select the font you want to use, they host and provide the CSS you need. Super easy to use but it’s still early days so it’s not quite ready for production sites. Great for supplementing a Fontello collection.

Watch this space for more on HTML prototyping.

If you have any more Font Icon ideas share them below.

Leave a Reply