Grow your CSS skills. Land your dream job.

#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.

Links from the video:

Comments

  1. Hey Chris, have you used Fontello? They took several of the icon fonts (7 sets right now) and allow you to pick and choose. Game changer! http://fontello.com/

    • Nice. So it’s like a slightly more feature limited IcoMoon? =)

    • Doh! That’s what I get for commenting, then watching the video.
      Ordering the rMBP this week. Glad to hear you are enjoying it (and not experiencing the burn in issues).

  2. Derek
    Permalink to comment#

    Great video as always Chris. Will be using this today!

  3. Lorenz Kahl
    Permalink to comment#

    Hi Chris,

    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.

    Cheers,
    Lorenz

    • Lorenz Kahl
      Permalink to comment#

      Thanks for the advice Keyamoon.

      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?!

      Cheers, Lorenz

    • Chuck
      Permalink to comment#

      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.

  4. Curious how the icons were inserted for Shop Talk w/Wordpress –and from the looks of it– using…

    http://codex.wordpress.org/Function_Reference/wp_nav_menu

    wp_nav_menu()

    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 :)

    • kartonnade
      Permalink to comment#

      Hi !!

      @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.

      Context : I’m using Roots* theme https://github.com/retlehs/roots and it has a great walker for wp_nav_menu() (located in roots/lib/nav.php).

      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.

      Here are some details about the above, as well as the full walker http://codepen.io/anon/pen/cigqw.

      (I am not sure if it is a proper use of Codepen but I didn’t manage to write code in the message …empty div issues…).

      Here is the full nav.php file https://github.com/retlehs/roots/blob/master/lib/nav.php.

      I am not familiar at all with the wordpress menu walker (and icon-fonts) at the moment, hense any advice/comment on this is more than welcome!

      Cheers!

      *Roots is a wonderful starting theme for WordPress based on Twitter Bootstrap and html5 boilerplate developped and maintained by very talented people. http://www.rootstheme.com/

  5. Hi, I found the screencast useful and dig into font design. I’ve created CSS version of W3Conf logo concept with my own font here’s the demo: http://codepen.io/html5web/pen/kbIzE

  6. Ver useful screencast, Chris. Didn’t know about IcoMoon before and it looks like a very helpful tool.

  7. This was quite funny when you was getting confused about the difference between Britain and the UK. (dont worry most people from the UK get confused too).

    UK = Britain + Southern Ireland.

    And nice tut!

    • Permalink to comment#

      Great tutorial, I’m definitely going to be using IconMoon!

      Regarding the difference between UK and Britain, Ashley is almost there =)

      United Kingdom is officially “The United Kingdom of Great Britain and Northern Ireland” so:

      United Kingdom = Great Britain and Northern Ireland
      Great Britain = England, Scotland and Wales

      Southern Ireland(The Republic of Ireland) is a completely separate country and not part of the UK.

      Notice the ‘UK’ font character just has a little dot to the left where Northern Ireland is rather than containing all of Ireland.

      I hope that clears things up, I think I’m a little confused now though! =)

  8. Mo Wright
    Permalink to comment#

    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?

  9. 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!

  10. Permalink to comment#

    Hey, where is the mountain time zone? I’m more offended than the folks in Florida!

  11. 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!

  12. Casey Dennison
    Permalink to comment#

    Thanks, a ton Chris! This will certainly be of use in all my future projects.

  13. Nick
    Permalink to comment#

    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.

  14. Permalink to comment#

    Hey guys!

    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.

    Best,

    Jose

  15. Is it just me or do icon fonts not display correctly or not at all some times on Chrome?

    • Stefano
      Permalink to comment#

      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.

  16. Sara
    Permalink to comment#

    Thank you so much for this Chris! I was just looking into icon fonts and how to create my own and now I know how to do it :)
    Thanks a bunch.

  17. Permalink to comment#

    Thanks for the info, I was in the process of drawing a handful of little icons, but this helps in more ways than i can cover, so thanks very much Chris!

    And the UK thing.. hilarious! and after reading some comments, very informative for my american brain mush.

    ~NZ

  18. Chris, thank you very much for this tutorial.
    This is lovely, lovely and I love it! :P

  19. Ron
    Permalink to comment#

    I really like the *idea* of icon fonts, but in practice I haven’t found them to be very cross-browser compatible. They seem to often break (like so many things) in IE.

    Also, some browsers will display the icon, but won’t let me make it a link, since the icon element is empty.

  20. Martin
    Permalink to comment#

    This is awesome!!!

  21. Permalink to comment#

    What happens when a user browses the page and their browser does not support CSS3? Is there a way to fallback to an image instead?

  22. Permalink to comment#

    Hi there.
    Very nice and useful video.
    I have meet icons with http://twitter.github.com/bootstrap/base-css.html#icons
    But I haven’t got idea how to change them build up my own, but now, thx to U it’s really easy.
    Thx Chris

  23. Hi Chris.

    Love your show, but since this episode it is not possible to play videos on Windows Phone 7.5. I subscribed via Microsoft Marketplace.

    #112 works great, #113 & #114 doesn’t work at all.

  24. Ivo
    Permalink to comment#

    Hey all, this post inspired me and I also made a cool rounded social icon font, you can check it out over here Hope you like it :)

  25. Hey Guys, I have a quick question for you.

    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 ).

    -Kevin

  26. Sidd
    Permalink to comment#

    Excellent mate. Thanks for sharing this. This is the new way that I’d be moving along now. Can’t wait to use these on the new projects!

  27. Arvid
    Permalink to comment#

    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!

  28. Permalink to comment#

    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!

    • Arvid
      Permalink to comment#

      Hi thanx for the reply!
      I get HTML file and .svg .eot .ttf .woff

      The code you get that looks like “&#xe00a ;” all of them don’t work. So what do I have to do too get it working?

    • Permalink to comment#

      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)

  29. Permalink to comment#

    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.

    thanks!

  30. Karl
    Permalink to comment#

    A few questions,

    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:

    {font-style: normal;} = plain icon
    {font-style: italic;} = circle icon
    {font-style: oblique;} = square icon

    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.

    Thanks so much for this tutorial by the way! I’ve learned so much :)

  31. Tim

    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

  32. Permalink to comment#

    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.

  33. Candace
    Permalink to comment#

    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.

    But so what, it was still worth it!

  34. Husam Aneed
    Permalink to comment#

    Great screencast thank you!

  35. Permalink to comment#

    Hey Chris,

    I managed to create my own set of South Arican province maps which you can see here:

    http://vane.co.za/files/south-african-province-glyphs/demo.html

    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.

    Many thanks

    • Permalink to comment#

      I guess a better question to ask here is once these glyph fonts have been created, what size are they created at?

    • Permalink to comment#

      Busy talking myself through my own answers here :)
      I’ve since gone and checked again and all the fonts are created at 16px by 16px although in my case, the widths are different.

      Here’s an example of what it is I am trying to get right over at jsFiddle: http://jsfiddle.net/sixfootjames/LY5y5/14/

      As you can see the Northern Cape (yellow map) is meant to be much larger but this font size is the right size I am getting from my illustrator file.

      As I write this, it’s dawning on me that perhaps the font-size is what I need to understand more… :)
      Is font-size the width or height of a font?

      Need to go check :)

    • Permalink to comment#

      Finally managed to get it figured out.

Leave a Comment

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".