css - create multicolor icons. Icomoon

Question

It's been so hard to find any clear information about how to create icons with two colors (facebook -white and blue-, google- white and red.....). The customer wants to be able to change those two colors as he pleases. I have been looking around and I've found only http://www.programask.com/question_41701651_multicolored-icon-fonts# which seems quiet easy and clear for the client purpose (change the color when they want, but I haven't understood the procedure...).

I currently use icomoon, but I can't find how to add colors....

So I understood that I need an image editor, in case of facebook icon, I select the "f" and I save it in .svg and then the same with the background but "without the f", and I save it to svg too, but then.... how to I put them together to refer to just one icon?

I don't need to do it with icomoon though (but I need free software), but can someone explain me how to color icons through css?

Thank you

Answer 1

Creating multicolored icon fonts with icomoon is fairly easy but it combines them from multiple glyphs off course and seems to have no knowledge of a "default" color (the color which can be changed from the parent class) - so we need do define it as inherit in the CSS :

1) Create your SVGs with your favorite vector app like Inkscape or Adobe Illustrator.

Important : Icomoon (and anything else) will use one glyph for each colored path in the SVG, so make sure to join the pathes with the same color and don't use too many colors …

Illustrator makes it easy to join compound pathes : https://www.youtube.com/watch?v=jbc3q9bfOH8 and to join objects: https://graphicdesign.stackexchange.com/questions/999/how-do-i-combine-two-objects-into-one-in-illustrator …

2) Make your icomoon font.

3) Determine your "default" color in the CSS - lets say it is rgb(62, 55, 60);:

In [class^="icon-"], [class*=" icon-"] { add

/* default color */
color: rgb(62, 55, 60);

and remove every other line reading

color: rgb(62, 55, 60);

or to be explicit change it to

color: inherit;

That's it.

When I only use two colors (e.g. the darkgrey and orange) properly joined I would never get more than two children in the icon and I could change the darkgrey from the root node <span class="icon-myIconName"> ...

Here is a working codepen with a 2-color font used with only one element where you can change the color …