#113: Creating and Using a Custom Icon Font

As we've said around here many times: icon fonts are awesome. They are efficient in the same way CSS sprites are efficient: lots of images usable for different areas/purposes in one single download. But they are even more awesome than sprites because they are vector and so can scale to any size, be shadowed, change color, and more. They also look fantastic on retina displays (or displays of any size and resolution, really).

To be the most efficient with your icon font, you should only load the characters that you need to load. And to be flexible, it's nice to be able to add to a single icon font from multiple sets or from any vector/SVG anywhere at all. The IcoMoon app lets you do all of this from it's super simple interface. You choose the icons you want, map them to whatever characters you want, then export the HTML/CSS/Web Fonts in a ready to use format.

thanks for the nice roundup! I’m already using Icomoon custom fonts on a current project.
Unfortunately there are some cross-browser issues…as always :-(

I found IE 9 & Firefox (current version) to look not quiet as sharp as Chrome and Safari on small icons with tiny details, but still OK. It can be worked around by increasing the size a little.
But, what might be a showstopper is that IE 8 looks totally crappy and I didn’t even test 6 or 7.

This might be due to the missing hinting of the font and the lack of Win XP’s antialiasing (ClearType).

Well I hope our customer will see the future proof benefits outweigh the support for a dying piece of software.

The EOT fonts generated by IcoMoon come with auto hinting. But hinting in general is not very useful. It increases the size of the font, and it’s not supported in OSX, iOS and Android. If you are using the icons provided in IcoMoon’s icon library, you should look at the size they are optimized for. For example, if you see (16 × N)px, it means that the icon font is optimized to be used with a font-size of 16px, or its multiples (32px, 48px, etc.)

Here is a screenshot showing my result when testing in IE7. I have tested this in IE6 in Widnows XP, too. Anti-aliasing would be missing as you mentioned, but overall, it’s pretty decent in my opinion.

First of all please don’t get my criticism wrong – your app is one of the most exciting thing I discovered in a long time! I think it’s totally awesome and I love using it!!!

It’s just that my customers are still using IE8 themselves (it’s a big company) and that’s when things start to get complicated. A png-icon will still look better for THEM and gets me into the arguing-circus with them ;-)

Is there any way for me to tell Icomoon-App to optimize my custom font for a certain size?
My base size for the page is 14px but the icons should render at 28px. So I’m using 2em as font size for the icons. Also I exported the SVG from Illustrator on a 16×16 px basis.
Would it be better if I used 28px all the way when creating the font? I just thought since it’s all vector-based it shouldn’t really matter… Maybe I’m wrong?!

This is a little late but, using the numbered font weights 400 and 700 instead of normal and bold helps in IE, why, I have no idea, maybe as stated it has something to do with ClearType. I don’t know if it helps in FireFox.

From the inspector you have the menu-item-{slug} class that the codex mentions when using wp_nav_menu().

Hard to tell from the assets visible in the inspector what’s being injected with PHP / Javascript and what you’re serving natively from the wp_nav_menu() call in header.php. If that’s an answer saved for the next screencast then pretty please go over this topic if you could. Thanks dood :)

@Chris : thanks a lot for this great tutorial (and all the others BTW) !!

@Grey Ghost : I’ve seen your post and I’ve been struggling around this for few hours. I was curious as well to find a way to achieve the same (without hardcoding the menu) and I may have found something.

I’ve added few lines to the walker to add a “MyIcon-$slug” to target each menu item specifically.
(I use “MyIcon-” instead of “icon-” as a prefix to avoid conflict with Twitter Boostrapp that already uses it).

It requires two step for the php part :
First, add linkbefore and linkafter arguments to wp_nav_menu()
Second, add class “MyIcon-. $slug” using the walker.

Once again you have read my mind! I was starting to look into icon fonts for web use. Wonder if this works with text gradients (ponders thought). Can’t wait for CSS-Tricks v10 to come out. Is there a set date yet (you mentioned Sept.) for the release?

Great video, Chris. Have been looking into using icon fonts for a while, just need to find a project to use them on now! IcoMoon looks like a great app too, will definitely be using that when I do.

On top of being vectors, what makes them better than images is that hover events can be attached to them easily with CSS. There isn’t really a quick and easy way to change an icon image on hover without creating another image and swapping them.

Further to what Ashley Clarke commented, Great Britain is actually just England, Wales and Scotland combined. The UK is GB plus Northern Ireland. The Republic of Ireland has not been part of the UK since 1922. Little bit of geography and history thrown in with the web development!

Wow! This really comes handy right now. I was about to start a project using custom icon fonts and I was researching about expensive font editing software. But IcoMoon seems to be the way to go. I was also wondering about the best HTML code to use and now I have the answer. Thanks so much for this, Chris!

An image/png icon just looks better on windows.. Firefox smooths the font out really nice but chrome(and I believe opera) are still using the font rendering engine that makes text clunky, making icon fonts look clunky. I read somewhere that they’re working on changing chrome to the prettier text rendering engine.

I downloaded the a few characters from IcoMoon that I want to use on my WordPress site, but I really don’t know what to do with the files. Do I import the IcoMoon folder to a folder on my web host? If so, which folder? What do I do after that?The IcoMoon site does not provide helpful instructions. Did I miss something in the video?

If you can please provide me with any sort of direction I’ll buy you a Mercedes Benz. Okay, no not really, but please help. Thanks.

I have the same problem sometimes with icon fonts in Chrome. I don’t know why and now that I try to replicate the problem it’s not happening. It looks like restarting the browser or the computer fixes it, but when it happens in one place, it happens everywhere else. Either the icons appear squashed together / over each other, or they don’t appear at all. Very strange.

I’m trying to include an icon font search icon, but I cant seem to find a solution to work with a screen reader. I can set the value to the font icon and apply the font to the input field, but I don’t think a screen reader is going to like “2” over “Search” that’s hidden. I don’t know if I should just create a new element that emulates the submit button, or if you guys have a better clever solution (which might already be right under my nose ).

I did not really understand how to add them. thought you meant that you add them all at once instead of one by one ..
did not really understand, do you have a helpful site you can recommend?
Sorry, I’m new!

Arvid, I am new at doing icon fonts to. I have found that doing reverse-coding will help a lot. Just use the Ico Moon link, find a few you like, and create/download the new font files (they’ll be zipped). Included is an HTML file to show the different ways they can be used. Just pop the HTML page into your code editor of choice and look at how they’re using it for the page. I did this and experimented and am happy to say that I learned quickly the best way for me to implement them. If you have any other questions, back-trace my website link and drop me a line on my site. Also, check out the other cool things here on CSS-Tricks. You may not have instant results, but time improves learning!

Start out with something easy. Copy and paste one of the divs holding one icon. Then, in css, add the required css from the example css over, and see if it works. For example: I like using the span style, so I copy and paste “< span aria-hidden=”true” class=”icon-github” >< /span >” into the html document, then I copy and paste the css for the font-face (you need all of the font-face css to make it work in the browsers since each one uses a different file, and make sure paths are relevant to the css!). Then copy and paste the “class per icon” option into my css file. After that, I use the “.icon-github:before” css style to get the icon to show. If this still does not work, or confuses you more, email me (info [at] mauricewright [dot] name) and I’ll send you some extra files that may help, and I’ll check your markup for any errors. I think this option will work out for all of us as Chris has been nice enough for my long postings. (Thanks Chris)

Hi thanks for this tutorial, it took me a few hours to find this piece of info but now I finally created my icons list. However I’m a total newbie and I’m not sure of how to upload this set on my wordpress website, as I want to be able to use these icons in my posts. Do you have any suggestion? I’d rather avoid installing a plugin but if it gets too complicated I might as well go for it.

In the midst of creating an icon font I had a thought, what if you have several styles of icon fonts you want handy? One is the plain icon on its own, another style where it is inset inside a circle, and another where it is inset inside a square. You may want to use these different styles to visually separate your icons into categories (e.g. network icons vs bookmarking icons). Instead of creating a different @font-face kit for each one, could you not simply make one kit with all of them included? This way, instead of having several HTTP requests for each style of icon, you just have one for the whole set. And, when designing for new websites, you just upload your one trusty icon font that you know has everything you need to style on the fly.

Another thought is (although this may be totally ridiculous because I know nothing about how fonts work), could you not make it so that each one of those styles is accessed through a font property in your CSS instead of making another unicode symbol for each one? For example:

However, I imagine font properties may simply affect the actual font image and manipulate it rather than it serving up an entirely different font image. This may also go against semantics. Again, I know nothing about the makings of a font other than what I just learned in this tutorial, so this may be a totally ridiculous idea. I just thought it could save a lot of time if there was such a way to switch your icon style with simple change in property.

Let’s say that you have exported the icons you want from icomoon. In this example some of them are from say Font Awesome and 30 are custom ones that you’ve made yourself by drawing them in illustrator and saving as svg. In html/css you change class names, add states, and change colors.

Later, there are another 10 icons to be added.

I know there is a dev file (your library) included in the icomoon export that you can drag back into icomoon to add or remove icons. However, you would need to export this library again with the new icons you added. Now you would need to recreate all of the css/html work you did with all of the custom states and rollovers etc. Has anyone encountered this? If so, how did you deal with it?
I’m looking for an icon font application that addresses this workflow.
Thanks

Hi, Chris. I have a question that I hope you can answer for me. I’m using the Sosa font on my website’s main page (gray cards, if you are kind enough to check). All of a sudden, non-standard characters like foreign accented vowels, semicolon, braces and brackets don’t turn into icons. I’m desperate because I’ve turned to many experts but none has been able to provide a solution or a hint. I wish to add that everything is working fine locally -the problem arises from my hosting service. I will appreciate your wise advice.

Having read this I thought it was extremely informative.
I appreciate you finding the time and energy to
put this short article together. I once again find myself spending a
significant amount of time both reading and leaving comments.

What I am trying do now however is to build an interactive map so that when you click on a province something happens. Yet, when I import the glyphs, which works super well, and try and piece the map together, all the glyphs are the same size where some of the provinces should be bigger than others so as to puzzle the country back together again.

I’ve tried a number of tricks and so far, manually settings the sizes has been the only way to get it right but I wonder if there is not a way to null/zero the sizes so that when I import the maps, they are their original sizes and all I have to do is use absolute positions to move the individual provinces back together again to make up the country South Africa.

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.