Creating Icon Fonts

What are Icon Fonts?


Icon fonts are unique glyphs in a font that can be almost anything you want them to be. Common examples would be a house, an email or a cellphone. However they can be anything you want them to be.

Why They are Cool


The cool thing about icon fonts are since they are vector they can be scaled however big you need them to be. Since they are a font you can style them with CSS like you would any style any text. That means you can have them change color on a hover state, which is pretty awesome! Have fun doing that with a sprite map.

How to make icon fonts.


All you need to make icon font is a vector editing program. I used Adobe Illustrator and Glyphs Mini to make mine.

First thing you will need to do is draw your icon. An important thing to know while drawing your icon is to only use fills and not stokes. Stokes will just be ignored so don’t use them. If you need to use a stroke just make sure to turn it into a fill before you are done. You can do this in Illustrator by choosing the Outline stroke option.

Now you have drawn your icon you are wounding, how do I get this on my website. There are a couple ways you can do this. I will tell you of two of them.

Export as SVG From Illustrator.


  1. Save as a SVG file
  2. Go to IcoMoon
  3. Start the IcoMoon App
  4. You can just drag your SVG file right into the app.
  5. Now you select the icons you want to use in your font and click the Font —> button at the bottom.
  6. You can Change where the icon is mapped to if you want then click download.
  7. Now you can use this as you would any web font with the @font-face.
  8. Don’t know how to use the @font-face, there is a article on CSS Tricks that can help you out.

One draw back of this method is that each icon will have its own SVG file before you combine them with IcoMoon. If you don’t like having lots of files I would suggest using the next method.

Also make your files square. Ex. 1000px x 1000px

Using Glyphs Mini


Glyphs Mini is a slimed down version of Glyphs. Glyphs is used for creating font family’s and has some super advanced settings for setting everything associated with a font. Glyphs Mini will work fine for anything you will need to create icon fonts

Glyphs Mini can be downloaded on the Mac App Store.

Create your icon font.

I found it worked best for me if you make your art board in Illustrator 1000px x 1000px because IcoMoon want the icon to be 1em and Glyphs Mini considers 1em to be 1000 x 1000 to be 1em by default

  1. File > New
  2. To make your font this 1000 units high in Glyphs Mini, go to File > Font Info
  3. Then choose Metrics and make it so the difference is 1000 from the descender to and ascender. I made my ascender: 750 Cap Height: 500 xHeight: 250 and descender: -250. I am sure there is a better way to do this but this worked for me.
  4. Click the “+” to add a new glyphs.
  5. Double Click the new glyph you just made and it will open it.
  6. At the bottom you should see a mini table at the bottom. It will probably have a W: 600. Make that 1000 to make a square because we made it 1000 high.
  7. Copy your icon from Illustrator and paste it into Glyphs. Do that for all your fonts.
  8. File > Export Choose the otf option.
  9. Go to Font Squirrel and upload your otf file. Font Squirrel will create all the file you would need to use for your web but we will use IcoMoon because it is easier to pick and choose and combine icons you want.
  10. You will get a SVG file from Font Squirrel, among others but we just care about the SVG
  11. Go to IcoMoon and drag your SVG file in.
  12. Now you select the icons you want to use in your font and click the Font —> button at the bottom.
  13. Change where the icon is mapped to if you want then click download.
  14. Now you can use this as you would any web font with the @font-face.
  15. Don’t know how to use the @font-face, there is a article on CSS Tricks that can help you out!

Now I Have my Icon Font How do I put it on my site?


The cool thing about Icomoon is it will make the css file for you that has the font-face rules in it. Link up your font and the css file like you normally would. All you have to do is put this code in where you want to use your icon font.

Old Way

<span aria-hidden="true" data-icon="yourfontcodehere"></span>

You just have to change the value for the data-icon to where you mapped it to. Not sure where you did, Icomoon also created a html file that will tell you

New Better Way

<span aria-hidden="true" class="youriconfontclasshere"></span>

IcoMoon will generate a css file that has each icon mapped to a class. This is the best way to use icon fonts. Just use whatever class is mapped to that icon and your done.

You just successfully created your own Icon Font and put it on your website. YAY!

Icon Fonts are Great


  • They are easy to use, if you can use font-face you can have a Icon Font on your site.
  • They are vector and text, so everything you can do to text you can do to them.
  • They are scaleable.

Resources


Leave Your Feedback

Name is required.
Email is required.
URL is required.
Message is required.