Icon fonts are a flexible solution for adding icons to your website. Having the icon contained in the font allows you to switch size and scale, color and add effects easily without having to redraw an image. In addition a font needs to be only loaded once, rather than 1 call per image (unless you are using a sprite like a fancy person, but sprites don't have the previously mentioned font benefits)...
Do you need customized icons?
Probably not, there are several robust solutions already available, fontawesome, iconic and many others. (weloveiconfonts.com). Most of these libraries include almost all of the icon applications that you can imagine a use for, facebook, twitter, friendster, myspace.
However, if you are going to add a font library, why not your own? Or if you want to add a precreated icon library, but only want to include 5 icons, you can create a smaller leaner version.
Software tools you will need:
• Illustrator, Photoshop, or another shape creation software.
• Font creation software, such as glyphs or forge.
You will need some kind of software for creating the shapes that you would like to use, I suggest illustrator, but you could probably use photoshop or any one of the many others, although I think vectors work better. I have found that layered images have a way of rendering unusually in the font creator, so pay attention to layers, strokes and outlines. Ideally you want one solid shape. Whitespace should be cut out, so the background will show through. In this example I have created a cake icon.
I am using a font creation tool called 'Glyphs Mini', which at $44.99 is a steal.
There are a couple of good tutorials out there for using this software, however it is is actually pretty easy to guess at how it works.
Importing your icons is as easy as cut and paste. Each icon aligns to a keyboard character. The font can be as large or small as you wish. We want to keep the font file sizes as low as possible, so don't include blank characters. (here visible so you can see what they look like).
Once you have created the otf by exporting the font, use a web based font package generator to create all of the font versions that you may need, including an internet explorer eot and also svg backup.
Integrating the font into your site.
In your theme, add your fonts to your 'font' folder, or wherever you would like them to live. In this example I am assuming you are using sass. (use sass).
You can load the fonts in various ways, over time I have defaulted to using a sass mixin that was constructed from various examples I found around the web. You can build a mixin to include any parts of the font information that you need. It is a good idea to see how this out puts as css to make sure that you get all of the items you require. Sass meister example here.
//a variable to contain any extra path information required for the mixin
$base: path to font folder
//mixin (using shorthand) for fontface integration
=fontFace($family, $src, $weight: normal, $style: normal)
@font-face
font-family: $family
src: url("#{$base}/fonts/#{$src}.eot")
// IE9 compat
src: url("#{$base}/fonts/#{$src}.eot?#iefix") format("embedded-opentype"), url("#{$base}/fonts/#{$src}.woff") format("woff"), url("#{$base}/fonts/#{$src}.ttf") format("truetype"), url("#{$base}/fonts/ {$src}.svg") format("svg")
// legacy iOS
font-style: $style
font-weight: $weight
// Load Font Example, how you would use the above mixin
+fontFace(tobias-regular, tobias-regular-folder)Once you see that the font is loaded in your css file, you can start using it.
Probably a good idea to add a mixin to control the font, an example would be:
//a variable that contains the family name of the font $tobias-icon-font: "tobias-regular" //mixin that uses the new font =new-icon-font font-family: $tobias-icon-font speak: none font-style: normal font-variant: normal text-transform: none line-height: 1 font-size: 32px
Now you can start adding your font to selectors on your site, but there is a way that you can make your font even more useful.
Notice in glyph, when a character is highlighted, there are a lot of details provided to you, perhaps the most exciting for us is the unicode.
By assigning the unicode values to a variable we can call the icons easier, in a way that makes a little more sense.
So in our cake icon example, the unicode value is 0061, so we could set our variable as $cake: "/0061", and then call it.
.test-class +new-icon-font &:after content: $cake etc etc
That is it for adding icon fonts. Here are some links I find useful:
Web Fonts Performance: Making Pretty Fast
