How to use IcoMoon and Icon Fonts – Part 1: Basic Usage

Note: This post was updated on December 18th, 2013, to use new screenshots that show the recent redesign to the IcoMoon App.

I’ve become a huge fan of using icon fonts recently. I love the fact that graphics elements that are implemented this way are vector based & stylable with CSS. It makes them really easy and flexible to work with.

One of the things that you will have to confront, though, is how to actually get an icon font that you can use. That is where IcoMoon comes in. It is an online service that lets you generate a custom-built icon font, using icons that are either open licensed or for-pay.

I’ve used IcoMoon on a couple of projects lately, and wanted to share what I’ve learned. I’m going to break this into three seperate posts:

Audience

These articles are intended for front end developers, or anyone who is in the business of actually creating working HTML & CSS for websites.

Assumptions

I’m going to assume that you know how to write HTML and CSS to a fairly high degree. The concept of attribute selectors is not foreign to you.

What I won’t cover

I’m not going to cover how to create a font from scratch – there are libraries full of books on just that subject. This also isn’t a primer on drawing icons themselves.

To the moon, Alice: Launching IcoMoon

The IcoMoon site actually has a few facets to it – you can download packs of vectors files to use in design work. To use the font generator, you need to click on the “App” link, then the “Launch App” button.

Go to "App" on the IcoMoon home page

Then, start the App

Now – the fun part – picking out icons! Take a look at the default set of IcoMoon icons and see if anything strikes your fancy. In my case, I want to use this rocket ship:

Picking an icon on IcoMoon is as simple as finding one you like, then clicking on it.

Go nuts! Pick out as many icons as you want to use, or have use for. My icon fonts tend to end up in the 20-30 icon range.

Be sure to read the third part of this series for some ninja level stuff you can do at this stage

Generating the font

When you’ve added all the icons that you want, you need to click on the font button at the bottom of the screen to get ready to generate a font:

Hit the "Font" button to generate your font

This takes you to the “Font” screen, which shows you every icon that you’ve selected, as well as the unicode character for it (more on that in a bit).

A list of icons in our font, with a download button

Now click “Download” and IcoMoon will kick out a zip file, with your custom icon font(s) in it.

What you get

The set of files that you get from IcoMoon

IcoMoon gives you a few things when it generates your font –

  • A “fonts” directory that actually contains the generated font files
  • demo.html is a useful HTML file that you will want to keep a hold of for reference
  • A demo-files directory – this is just extra stuff needed by demo.html – you don’t really need to worry about it
  • style.css – used by demo.html, as well as the CSS you will need to incorporate into your project in order to use your icon fonts.
  • Read Me.txt – just what it says
  • NEW as of Fall 2013 – selection.json – A file that contains your choices and configurations, which can be uploaded to IcoMoon if you need to revise your font later. (Author’s note: I’m very happy that this comes by default now)

The way I generally roll is to have a directory in my project, on the same level as /css/, called ‘fonts’, and I drop this whole IcoMoon folder into it. Then I copy the four font files that I need and put those copies into the top level of /fonts/.

How I roll with my fonts- I copy over all the fonts, but leave the originals in place.

Why copy? You will see in part 2.

Using your icons

In order to actually use the icons in your icon font, you will have to 1) add your icon font via CSS and 2) insert your icons.

If you open the provided style.css from IcoMoon, you will see the @font-face rule that you will need:

    @font-face {
        font-family: 'icomoon';
        src:url('fonts/icomoon.eot');
        src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
            url('fonts/icomoon.woff') format('woff'),
            url('fonts/icomoon.ttf') format('truetype'),
            url('fonts/icomoon.svg#icomoon') format('svg');
        font-weight: normal;
        font-style: normal;
    }

You will need to adjust the paths to the font files to suit the relationship between your CSS file and your font files. I almost always have to insert ‘../’ into the font path in my projects:

src:url('../fonts/icomoon.eot');

To insert your icons, you can go about it two ways:

Inserting icons as elements in HTML

The majority of the time, you will be inserting new pieces of markup. The trick is to have a data attribute attached to your icon element. The convention suggested by IcoMoon is to use a <span> with a ‘data-icon’ attribute:

<span aria-hidden="true" data-icon="&#xe001;" class="down-arrow"></span>

You could just as easily use an <i> element as has been suggested elsewhere. The key is the data-icon attribute, and it’s contents.

That is because, if you look at the downloaded style.css, in order to have your icons show up, you need a piece of CSS that looks like this:

[data-icon]:before {
        font-family: 'icomoon';
        content: attr(data-icon);
        speak: none;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
    }

What this does is target any element that has the data-icon attribute, and using the :before pseudo element, inserts whatever the contents of that attribute actually is. Just be sure to use the right HTML entity for the icon you want, which you can figure out by looking at the provided index.html.

Using pseudo elements

I’ve kind of covered this previously. If you find yourself in a situation where altering your markup is difficult (and you aren’t worried about IE < 8), you can insert icons via :before or :after pseduo elements. The trick is to just ‘escape’ the HTML entity that references the icon you want:

.foo:before {
    content: '\e001';
    font-family: 'icomoon';
    speak: none;
}   

You can then style this however you want – with font size, color, css transitions, etc.

So that is a basic run down of how to get started with IcoMoon. Be sure to catch the next part of this series where I will go over the workflow that I’ve found works (for me) when working with IcoMoon’s icon fonts.

  • sudhakarmuthu@gmail.com

    Good article! I’m already using 5 icomoon fonts in our website. I want to include 2 more fonts. What should I do? Can I add the new 2 fonts to existing fonts?

    • Chip Cullen

      I’m a little confused – you have five icomoon fonts? Or do you mean to say icons? Generally, you only generate one font from IcoMoon, and it’s comprised of many icons. If you need to go back later and add more icons to an existing font, you can either a) upload the dev.svg form of the font, or b) upload a saved session file (you have to manually download it separately at the time you generate your font). That will ‘load’ your font again into IcoMoon, then you can go back and add additional icons.

      • sudhakarmuthu@gmail.com

        Thanks for you reply. Yep, I meant to say icons. Thanks you! it worked.

  • Olivier83

    Hy,

    Can you used icomoon as css background in a div or td element ? Thanks for your reply

    Olivier

  • bimbolera

    hi and thanks for this great write up. i’m just wondering if there’s a way to update an icon list? like for example, i’ve generated this hundred icons of mine, then i forgot to include an icon, is there a way to squeeze that single icon into my “already” generated icons? or should i start doing it from scratch? looking forward to your answer! thank you šŸ˜€

    • Chip Cullen

      You will need to regenerate the entire font. However, that should be pretty straight-foward – if you have the ‘session’ file that came with the initial download from IcoMoon, you should be able to upload that, and be right back where you left off. You can then add whatever extra icons you need and regenerate.

      If you don’t have the session file, the .svg version of the font file should also work.

      • bimbolera

        thanks for the svg part! just what i wanted! thank you very much for your kind assistance! keep up the good work šŸ˜€

  • Sassh

    I have an application where we have used icons from icomoon.I am new to this, now i want to add the icon of say youtube in my application. What all do i need to do for this?

    • Chip Cullen

      Are you talking about a web application, or a ‘native’ application (e.g. a desktop app, or iOS app)?

      If a web app, you would generate an icon font using the steps outlined above, and simply add the YouTube icons to your font. You can insert the icons into your markup either with «span» elements, or with CSS pseudo elements.

      However, if you mean a native app – I really don’t know. From what I gather, graphics in such apps tend to be individual graphic files, but I have not done any work in those, so I can’t say for sure if an icon font is usable or not.

  • andy

    Great post ,but how do you get this unicode in html (data-icon=””)? I try Icomoon but I can’t see anything like that.

    • Chip Cullen

      When you generate a font in IcoMoon, you will get an example demo HTML file that lists out every icon in your particular font. You can open that normally in browser, and it should tell you the unicode strings.

  • Thaks a lot Chip, this was very helpful! I was always scared of using @font-face but not anymore! šŸ™‚ One question though, how do I create a hover state and change the font-icon’s color?

    • Chip Cullen

      You can add a hover state to your icons through CSS – which is one of the most attractive aspects of working with icon fonts! Anything you can do with CSS you can do to an icon from an icon font. If you have a link, and you’re using an :after psuedo element, you can do something like this:

      a:hover:after { color: yourhovercolor; }

      The sky really is the limit! CSS Transitions also work on icons from an icon font, too!

      • Thanks Chip! I thought it would involve an :after but wasn’t sure! The only issue I have is that I added an icon that appears at the top of my site when the screen is resized for mobiles but it’s not clickable within my phone but works on the PC!

        Here is a link: http://groovymotion.com/PageStyle6.html I use the same thing as the icons at the bottom, an href outside the span but it doesn’t work!

        • Chip Cullen

          Sorry for taking so long to reply – but, why not add a :before to the link itself? That’s what I’ve always done, and it works fine on desktop and mobile. So, something like this instead:

          a[href*=”facebook.com”]:before { content: “\f09a”; }

          You might need to apply the font-family declaration as well. Hope that helps!

  • Joao Paulo

    Hello! Why I cant load two css files generated by IcoMoon? The first one load and second one dont load.

    • Chip Cullen

      I generally don’t work with the CSS files generated by IcoMoon, so I really can’t say. If you’ve regenerated your font, the CSS files will likely have similar class names, so that could be a conflict.

      • bandito

        that’s not it bub. Tried to change the paths, and the content with no luck.

  • Pingback: 25+ Best Free Icon Fonts()

  • sankar

    but i am getting more path classes for one icon,and after donwloading it coming with empty content in my local system. can any body tell me the solution..?

    • Chip Cullen

      I’m not really sure why you’re experiencing that. Maybe try making a new font and see if you get the same result?

      • sankar

        okay.and im not getting the icon class in single.its span with huge paths clkass included like likwise…how to merge paths in illustrator..can u know illustrator..!!

  • thanks man for a straight-forward tutorial šŸ™‚ i actually managed to use icon fonts in wordpress through your tutorial

  • uthra

    how can i use roboto font and icomoon font in single site ?

    • Chip Cullen

      Roboto is a regular text font, and can be used alongside an icon font generated from IcoMoon. You can load more than one font at a time. Just be careful – web fonts are heavy assets, so use them judiciously.

  • Tobias Crops

    Hello, Chip, really great article! Maybe you could help me?=) I used this line of the code “-o-transform: scale(1);” to scale my icons in Opera properly, however it didn’t help me. Maybe it is because of specifically these icons, that I am using – https://mobiriseicons.com/ Is it possible that something is wrong with them? What do you think? And thanks for your tutorial!

    • Chip Cullen

      My guess is that you don’t need the “-o-” vendor prefix. First, “transform” hasn’t needed vendor prefixing for a long time. Second, Opera pretty much runs the Blink (read: Chrome) rendering engine, so I’m not sure that “-o-” vendor prefixes work anymore. I’d just try “transform: scale(n)” where “n” is a proportional number. So, in your example “1” won’t scale the icon at all, either, as 1 = 100%. If you wanted to double the size, you’d use “transform: scale(2)”. Does that make sense?

      • Tobias Crops

        Thank you very much, Chip!