Why icomoon, why?
Icon Font generators are very useful for computer engineers but, mainly, for web designers and front-end developers. They are an interesting tool that allow developers to use icons as if they were a font. In other words, they enable us to use vector images without losing quality, change their colors very easily and adapt the size effortlessly.
Besides, you can apply CSS properties only used for text such as “font-size” to choose the size of the icon no matter how big or how small, “color” to put color to them and “font-weight” to change its appearance. Just like that.
Getting to know IcoMoon
One of the best and less complicated generators is IcoMoon, an icon solution platform that puts at your disposal not only the tools for making a new self made font, but also a wide range of free icons with which you can elaborate your own icon library.
Nevertheless, icomoon is sometimes too good to be true and it can be pretty tricky to implement.
To begin with, not every vector picture is suitable. SVG is the only format that actually work for this platform. Not AI, not CDR, not PSD, not SKETCH and, specially, no PNG. In addition, there is only one way to make icons and if you don’t design your vector images correctly, or you generate the font in an inadequate order, you would come across with several error messages.
The way to do things
So, which is the correct way of making your awesome icon library?
The most important step is to build your icons using Sketch, Photoshop, Corel Draw or any other vector graphic editor that can save its documents in SVG. How can you know if the process has been successful? Well, you can try to submit them to IcoMoon.
Clicking on the purple button on the top of the page, you can access the IcoMoon App.
Then, you can select the already made icons of IcoMoon itself or import your self made icons clicking on the purple button and adding them. If no error message is returned, your icons are ready to be installed in your projects
Fixing problems
However, what if an error message pops up? In most cases, it will be a message telling you that IcoMoon ignore strokes when generating fonts or CSH files. But, what does that mean? That basically means that you should convert it to outlines. How? Here you have a few advices.
The easiest way to resolve this issue, is converting your awesome vector to outline following these instructions
- Sketch: Select the shapes and go to Layer — Convert to Outlines
- Adobe Illustrator: Select your shapes go to Object — Expand
That didn’t work? There are still plenty of things you can do. If you have tried to import a text, you should know that text element get ignored too, so you should turn them into fills. Furthermore, you should revise your design in order to identify whether strokes are overlapping each other, and every stroke must be one single color.
If the problem persists, combining your figures is a good solution too, using simple elements (circles, squares, triangles, lines…) and putting them together. In the same vein, you can make your icons by subtracting one shape with another to make holes instead of white shapes. If none of that works, redo you icon with one single stroke.
Problems solved!
Once IcoMoon doesn’t return any more error messages, you can click on the “Generate font” button on the bottom of the page and then download it. Congratulations!
