How to Combine Icon Fonts for a Website

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

Hello readers of the “Learning sessions” rubric. Our last article “How to Change Your Store Title in Magento” was about work with one of the most powerful ecommerce platform. Today we offer to talk little bit about design. Actually, we’ll share our own methodology of the website icon font’s creation.

Well, 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.

Ok, we have to find the necessary icon on the website (we use www.flaticon.com, www.iconmonstr.com etc for search). Let it be a G clef for example.

The image of Flaticon service web page

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!

Treble clef free icon image

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.

Image of Icomoon

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 Pointer image, 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.

The image of a treble clef

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.

Image trace picture

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.

Well, this is all for today.
We hope the article was helpful.

Best regards,
Tonytemplates team

This entry was posted in Learning sessions and tagged . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *