A Simple Guide To Make Your Own Icon Fonts

by Rafal Tomal

Icons can make any user interface more intuitive by their simple and symbolic visual presentation. Some of us have become so familiar with some icons that we can easily recognize their meaning without any words.

We can even say that icons created their own symbolic language in modern technology. We don’t need to explain anymore what a “hamburger” icon means or what this one stands for.

Icons can be a great addition to your design and I would strongly recommend using them.

I’ve been exporting my icons into PNG or GIF files and using them as regular images for many years. There was just no other way that would be supported by most popular browsers.

However, there are at least a couple of problems I have regularly dealt with in my work when I used icons as regular images:

• Size — I had to create many different sized versions of the same icon which is inefficient and time consuming.
• Color — I had to create big sprites of icons when I needed different colors of the same icons.
• Retina display — every icon image needed another version for retina display which is also time consuming and more difficult to maintain.
• Effects — there was a limited amount of effects I could do on images; for example, it wasn’t easy to make a smooth color transition.
• Exporting images — exporting bigger sets of icons was really time consuming when I had too many icons and they were all designed in a specific style.
• Code — there were many lines of code I had to manually type into my CSS to set up all the images under specific classes and sizes.
• Performance — images add weight and more http requests which only slows down your entire website.

Well, what if I told you that icon fonts solve all of these problems and are super easy to use, maintain or even to create your own? Additionally, this new method is very well supported by all major browsers. So, let me first explain what an icon font is…

What is icon font?

Icon font is nothing more than a typical font that you’ve been already using in your projects. When you look closer into a font file, you’ll see that it’s just a table of characters. Each character is a vector shape. Now, you can simply replace those vector shapes representing characters with any shapes you want.

Using that method you can create your own font full of your own shapes that can be used in the same way as you display text in HTML. As you can assume, your icons can be resized to any size you want, you can easily change their color and even apply any CSS3 effects or animations like you would do on any text. Moreover, icon fonts are more efficient because they are not so heavy and require only one http request to load one font file.

Every icon has its own character or symbol that you can easily display in HTML or CSS. Here is an example:

Font icons fixed my problems with: size, color, retina display, effects, code and performance.

However, it was still difficult to maintain it and create my own sets. There are tons of icon sets that are already converted into fonts and you can use them but what if you need only a few icons from the entire set or if you want to add your own icons?

That’s where I found an amazing and free tool called fontastic.me…

Fontastic.me comes to your rescue

Fontastic fixes these problems because you can create your own icon set by mixing other free or premium sets and even add your own icons. The whole process is as easy as selecting icons from available sets and then customizing the character symbols that stand behind each icon. Then, with just one click, you can generate files that are ready to use in your website project.

Let me show you how it works step by step:

Step 1: Create an account on fontastic.me and a new font.

This is the easiest step. Simply go to fontastic.me website and create a new free acount. Once you’re logged in, click “New Font” in the top menu.

Step 2: Export your own icon to SVG file.

You need to remember that all icons have to be vector based. You can use any software you want to create new vector files, as long as you can export them into SVG files.

I usually create all my vector icons in Adobe Illustrator. Then, I change it to solid black color and I crop the document to fit the icon:

Go to “File -> Save as” and choose “SVG” as a file format and click “Save”.

Step 3: Import your SVG file to fontastic.me.

Once you have your SVG file ready, go to fontastic.me and click “Import Icons” in the top menu. Then choose the file from your hard drive:

Step 4: Create a new icon font set.

Now you should see your own new icon set created among other free and premium icon sets. You can change the set name and add new icons if you need to:

Now you can start building your new icon font set by clicking on the icon (it’ll highlight with a yellow border). You can choose as many icons as you want from different icon sets that are available. You can even import other entire icon sets if you have SVG files.

When you’re done with selecting icons, click the “Customize” tab to see your set. Here you can change individual icon codes and CSS classes.

Then, click the “Modify font” in the top right corner to change your font name and add a CSS class prefix.

Step 5: Download your web font.

Now you can click the “Publish” tab and then the “Download” button to get your files. What you get is the entire icon font set in different formats (.eot, .svg, .ttf, .woff) that support all major modern browsers. You can find also a CSS file that has a basic code for you to use.

All you need to do from here is to copy the “fonts” folder to your website project and include the CSS file.

Displaying your icons is as easy as:

<div class=”icon-rainmaker”></div>

If you want to make your icon bigger or change the color:

.icon-rainmaker:before {
	color: #0000ff;
	font-size: 100px;
}

It’s that simple.

Summing up

Fonts are very flexible in your designing work. They are optimized, fast, and now with some help from great tools like fontastic.me, they are incredibly easy to create and maintain.

Unfortunately, icon fonts are not perfect and have some downsides too. You may find some rendering issues in different browsers but they’re generally acceptable and all the advantages of using fonts outweigh this small weakness.

Visit RafalTomal.com for free design resources and advice
on designing websites, creativity, freelancing, WordPress, and more….