In a previous article, I addressed the many advantages of using a web font (in place of images) to render icons into your UI design. In the same article I mentioned a frustrating deficit of high quality, free icon web fonts available for embedding and conceded my own failure at building one with Fontstruct (less a font design tool than a mental health risk).
After continued experimentation, I found a satisfactory way to create a TTF and I’m now able to offer you Heydings Icons. It’s a fairly modest collection of 50 57 60 glyphs specifically intended for the accessorization and classification of textual cues such as hyperlinks, navigation elements and buttons. You can, of course, use the set much more expressively as well. Also, there’s no requirement to embed; you may just want to use it as a desktop/print font.
I’ve tried to map the characters to the glyphs alphabetically, although you’ll notice some cheating going on. Below is a demonstration of the font embedded in a web page. I’ve wrapped each glyph in an abbr tag so that the corresponding title elements can act as a key.
The icon web font in action
As I said, the font is best used to enhance text-based content. Probably the best way of achieving this is via the :before and :after pseudo-classes, since this requires no changes to the markup. In the following example, I am using two icons to help classify a link that connects to an RSS resource served from an external location.
The code
a#icon-example:before, a#icon-example:after {
font-family:'Heydings';
}
a#icon-example:before {
color:#c03f29;
content:'R';
}
a#icon-example:after {
vertical-align:super;
font-size:16px;
content:'e';
}
To get the font, download the TTF using the button below. To prep the font for embedding, I recommend you use a service like Font Squirrel’s @font-face generator. The current version is 1.2. Added in this version are glyphs for strike (lightning), archive and jotter (note pad).
The font is licensed under the SIL Open Font License, Version 1.1. This license is available with a FAQ at: http://scripts.sil.org/OFL.
Your post was quite on time :)
Twitter Bootstrap guys are looking for something complete web font based icon set, yours seems to have a potential.
groups.google.com/forum/#!topic/twitter-bootstrap/3O3ev582wAU
Since you have cared to release the icon web fonts.. take a look at this discussion thread where I posted about your awesome font, and if possible ask there for ” some ideas for other icons”. Community out there is vibrant, they would definitely give a positive feedback for missing common icons.
@Rakesh,
Much appreciated; I’ve joined the discussion as suggested : )
(groups.google.com/forum/#!topic/twitter-bootstrap/3O3ev582wAU)
8+1 for a combination of your font with bootstrap!
Great job!
@damnedh,
Thank you very much, sir!
I’ve put a class on your
abbrto show the ‘thumbs up’ glyph : )Great set of icons!
image free rss icon ftw. Thanks for these.
thanks for sharing this free icon set!
Hi Heydon, thanks for the Heydings, I can’t wait to try these out in the wild.
Have you any idea what the page-weight is (after converting for @font-face usage)?
Thank you very much Paul, jaime, David and Alistair!
@Alistair: After converting with Font Squirrel, the TTF and EOT are 18K each; the SVG a much larger 35K and the WOFF version is just 12K.
Great font! What I’m missing is a set of good UI base icons; an empty checkbox and filled and empty radio buttons?
It makes a great font for building a clean UI!
g is for _g_raph ;)
Thanks for the excellent icon font. When I downloaded the font I find 52 characters instead of 60. The one character I was looking for (warning triangle with ! within) it was not part of the font. Is there a solution? Thanks. — jal
Hmmmm. I’m not sure what’s happened there, John. Are you just looking at upper and lowercase alphabetical characters (of which there are 52)?
The warning triangle is mapped to the ‘!’ character (SHIFT + 1).
Hope that helps…
I’m getting 2 warnings (‘name’ table structure & ‘name’ table usability) from Font Book / Mac when I try to install. Is this something that needs to be fixed or is safely ignored?
These are great. Have you thought about putting them on Google webfonts?
Thanks, Ira.
They are not currently on Google webfonts but this set and the ‘Heydings Controls’ set are now on Font Squirrel: http://www.fontsquirrel.com/foundry/Heydon-Pickering