Creating a Custom Icon Font with IcoMoon and Less

Nowadays using icon fonts is quite popular and useful. All major front-end frameworks (such as Bootstrap, Foundation, Semantic UI, UIkit, and Pure) use some sort of icon font. And this is not without reason. Using an icon font brings several important benefits.

  • All icons are loaded in a single file, reducing the number of server requests.
  • All icons can be styled easily with CSS, thus no need to use an image editor.
  • All icons look crisp and sharp on all kinds of displays and resolutions.

In this tutorial, I’ll show you how to create your own custom icon font and then how to use it to build a small CSS icon library. Basically, it will be similar to icon components from other popular front-end frameworks, but with some significant advantages that you’ll see in the next section.

Why Do I Need to Create a Custom Icon Library?

So, why you would want to create your own icon library instead of using already built solutions such as FontAwesome? The simple answer is: You hold full control from the very beginning and implement only the features that meet your specific requirements and needs. Therefore, nothing superfluous!

Now let’s get more detailed about the advantages. You may need a custom icon library because:

  • It can include only the icons you want and need.
  • It can combine icons from different icon sets (IcoMoon App has plenty of them).
  • It can be easily customized (you can add/remove icons as you wish).
  • It’s completely portable and self-contained.
  • The CSS and font files will be much smaller in size.

As you can see there are many reasons to create your own icon library. So, let’s do it.

Create a Custom Font with IcoMoon App

We’ll call our project Pixie. So the first thing we need to do is create a new project folder and name it Pixie.

Now it’s time to create our custom icon font which, thankfully, for a tool like IcoMoon App, is just a piece of cake. The only thing we need to do is select the icons we want and download the font that’s built.

Let’s say that we plan to create an HTML editor for which we’ll need icons about text editing, and so on. If we use a regular icon font with these icons we’ll also get a whole bunch of icons we don’t need. Fortunately, in our custom font we’ll put only the icons necessary for our project.

Go ahead and open IcoMoon App. From the IcoMoon icon set select the following 22 icons, highlighted in the two images below:

When these are selected, click the “Font” button, and then click the “Download” button. After the icomoon.zip file is downloaded, navigate to it and double-click to open it. What we need to get from here is the fonts folder. So grab it and extract it into the project folder.

Now we’re ready to move on to the next step.

Continue reading %Creating a Custom Icon Font with IcoMoon and Less%

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s