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

Answer 1

The example in the link you provided is quite clear. You create 2 SVGs. One for each of the 2 colors in your icon, and add them as two different characters to the font. (\e006 and \e0007 in the example)

Then you use both the :before selector and the :after selector to add the characters using different colors. Each selector is using a different character and a different color.

The letter-spacing: -1 causes the characters to overlap.

I took their jsfiddle example and fixed it to work with font awesome: http://jsfiddle.net/p44zf3se/

Update

I am not sure why my previous answer was not enough, but here is another example. I can't upload it to jsfiddle because the font cannot be served from another site. So just take the html below + download the free IcoMoon font from: http://github.com/Keyamoon/IcoMoon-Free/raw/master/Font/IcoMoon-Free.ttf