Create your custom Icon Fonts with Icomoon

In the modern web, everybody wants their site should response quick and fast. This blog is not related to any web performances, but it will talk one key factor of web performance which is using CSS icon fonts instead of images.

Nowadays using icon fonts is very popular and useful. The purpose of creating a custom icon fonts library is to make better performance of web and some more which are listed below:-

• Icons looks more crisp and sharp
• All of the icons are loaded in single file which reduces number of server request
• Easy to customize in different resolutions
• Its much smaller and lighter in weight
• Completely portable and self-contained
• No images for icons

You can find lots of options available on the web to create your custom icon fonts library but I found it’s so easy to do this with Icomoon.

Now its time to create our custom icon fonts with Icomoon app.

Go to Icomoon application and you will see a hamburger menu on top left corner of your screen. Click on Manage project > New project (enter your project name) > load

After clicking on load button, you will see few font icons which Icomoon provides us by default. You can also use those existing font icons in your project.

To create your custom library, you need to click on “Import Icons” button (which is placed in the top bar) and choose your custom icons files which should be in “svg” format.
You’ll able to see your selected font icons in the screen. Now, you need to select all the icon fonts, then click on generate fonts (which is placed in the bottom section of the window).

Now, you’ll see your icon fonts with their classes name and CSS content code. You can rearrange them and also, change the name as per your desire. Click on download button (bottom of page) to create your library. You will an archive file, inside which is folder containing you font in WOFF, TTF, EOT and SVG formats. To use it in your project, you need to add these to your document using @font-face.

Hope this helps!