Icon Fonts, How To Create Them and Use Them

Icon Fonts, How To Create Them and Use Them

Posted by Rainey

Icon Fonts are with out a doubt one of the best ways to include flat vector images on your website that are not only small in size, but also look fantastic on retina displays. In this post I will cover my preferred way to work with icon fonts.

Icon Fonts, How to Use Them

To begin using Icon Fonts, you will need to find or buy a set that you want to use.  Checkout this earlier post for some of the best free icon fonts that I have found.  Incorporating your chosen set into your site can vary depending on which icon font you choose.  Most sets include a read me file to tell you how to use the set. However, I like to have “a way” or method to work in and, lucky for us, most of these icon font sets have the SVG versions included. Many of these solutions will simply include the whole set at import which means you may be loading fonts that you will never use on the site.

Because of this, I like to use an icon font app to build a custom collection for my needs.  There may be other good icon font apps out there, but I really like to use IcoMoon to do this.  They also happen to have a very nice collection of icon fonts that I highly recommend buying. The IcoMoon icon font app will allow you to import SVGs to be included in your custom collection.  Getting started is easy:

  • Sign up for an IcoMoon
  • Start the app
  • Select the icon fonts to include in your custom set
  • Import any SVGs that you also want to include
  • Click the font button
  • Click download

Now you have a custom icon font collection which includes demo files showing how to import and use your custom icon font collection!

 

Icon Fonts, How to Make Them

There are some pretty fancy apps, like Glyphs, to make icon fonts. But, if you want to try your hand at making these without the $300+ commitment, you can try using any app that saves SVG files.  I already have Adobe Illustrator for other purposes, so I will be using this.  To make your own icon font:

  • Open Illustrator and create a flat vector image
  • When you get it just right, save it in SVG format
  • Open the IcoMoon web app mentioned above
  • Import your SVG(s) to your custom set
  • Click the font button and then the download button

Now your custom icon font set includes your freshly created icon(s)!

I really hope this post has demystified icon fonts a little bit. Please share suggestions or tips on how you use icon fonts in the comments below.

Like what you are reading? Subscribe to receive monthly tips & updates!

A Monthly Roundup of Articles and a Sweet Deal

Get the latest tips, tricks, tutorials and freebies in your inbox once a monthly.

Join our growing community of front-end web developers and designers. We are constantly publishing new industry tips, tricks and tutorials to help you take your game to the next level. We are also going to include a freebie or deal on something cool each month. Enter your email below and you will only receive this email once a month, nothing else.

Subscribe to our mailing list

* indicates required


    Today in Web Design - Tutorials
    Tagged | , , , ,