How to Combine Icon Fonts for a Website

There are a lot of icon fonts packages, which are used by designers for majority of their works. We can mention Font Awesome, Typicons, Icomoon etc. But what will you do, if the website or a template you have to work with are unusual, and there is a need to use special icons that can't be found inside standard packages? The solution exists! We'll call for a help of some online services. Let's apply to some of them.Well, we have to find the necessary icon on the website (we use http://www.flaticon.com/, http://www.iconmonstr.com/

We should choose any favorite icon or more and download it in SVG format. It's really essential that all your icons are in SVG format!

After that we will turn to a very useful tool icomoon.io. We should create a new project – New Empty Set. Than just drug and drop our icons (SVG files) into the project. The service includes very useful tools for icons edition on its upper panel.

Now we have to fit all the icons in size by using an in-built editor. After that we should choose all the icons with the help of ,and press Generate Font button on the bottom side of the screen. Here we can set the font name as well as the other parameters.

At the end of the settings click Download. Now zip file, which includs our font in TTF, SVG, EOT and WOFF formats as well as CSS styles file are downloaded.

If you can't find your icon in vector format, you are able to use another method. You just need to export your bitmapped image into the vector format. You'll have to use Adobe Illustrator and your bitmapped icon for this purpose. We should find our icon with the help of Google Images or similar service and download it into the Adobe Illustrator.

After that choose Object-Image-Trace-Make in the upper menu. You'll see special settings. You can achieve the maximum quality of the curves by using of them. Press the Expend button.

Now you have to ungroup the image and delete all unnecessary objects (white background and internal unnecessary parts). You should leave only the icon. If your icon consists of several parts, you have to unite all these parts together. To do that you have to select all the parts and follow Object-Compound Path-Make. After that just save the ready icon in SVG format.

Author — Tonytemplates team

Tonytemplates is a team of web developers from Ukraine.More articles from Tonytemplates here - https://tonytemplates.com/blog/