Using Iconic Fonts

One of the new things I've started incorporating in my development is the use of iconic fonts.

No No No!

I'm talking about fonts that have icons in their character set like font awesome, batch icons, ico moon, and many many more.

So why would you use a font with icons in them instead of just images?  Well there are a lot of really good reasons, that other blogs talk about, really well so I will summarize my thoughts and what I have learned.

1. Really easy to use.
2. You can style them like you would a normal font (color size etc.)
3. You load them 1x.
4. Pretty much all browsers support them.

But wait, what about accessibility and users that might need to use screen readers?  Won't using these trip them up?

Dr. Says No.

Well, not if they do it right.  If an icon font is working correctly it will use the Private Unicode character range.  So it won't trip up the reader.

So now that we have established the reasons of why to use them, we need to see how to use them.

First thing you need to do is load the font via CSS as follows:

@font-face{
    font-family:Batch;
    src:url('https://googledrive.com/host/0B4QQSpfhQZN5bFZ1ckV4QTRPb2s/batch-icons-webfont.eot');
    src:url('https://googledrive.com/host/0B4QQSpfhQZN5bFZ1ckV4QTRPb2s/batch-icons-webfont.eot?#iefix') format('embedded-opentype'),
        url('https://googledrive.com/host/0B4QQSpfhQZN5bFZ1ckV4QTRPb2s/batch-icons-webfont.woff') format('woff'),
        url('https://googledrive.com/host/0B4QQSpfhQZN5bFZ1ckV4QTRPb2s/batch-icons-webfont.ttf') format('truetype'),
        url('https://googledrive.com/host/0B4QQSpfhQZN5bFZ1ckV4QTRPb2s/batch-icons-webfont.svg#batchregular') format('svg');
    font-weight:normal;
    font-style:normal;
}

Next you use that character in your html.  

.batch {
    font-family:"Batch"; /*or whatever you've decalred your font name as*/
    font-size:16px;
    line-height:1;
    
}

Super easy!


That is nice, but I want to be awesome.  I want to have a button that does X (settings, cancel, ok, etc) and I don't want to have to have that code everywhere I have an ok button.  I just want to to have my class know about the font and character.

You can be that awesome.  We can use the ::before and ::after pseudo-elements to do that.

.before::before{
    font-family:"Batch";
    content: "\f000";
}

That is awesome! But you know, after thinking about it, I don't want my content in my css it doesn't feel right. I still think pseudo elements are sweet though. Good News! You can still use them and even use the 'data-' attributes as well. Just put the character code in a data attribute of your choice, and add the following class.

.data::before{
    font-family:"Batch";
    content: attr(data-icon);
}

Here is the final output of everything!
view the tif file.