Create Multicolor Icons. Icomoon

create multicolor icons. Icomoon

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 …

Create multi-color confront with IcoMoon

1) You should not have 9 pathes when you have only 3 colors !

2) You should only have 3 pathes by joining all the rgb(7, 59, 75);

3) Each path is one glyph ("letter"). But you can only style :before and :after and so it is only possible with two colors, not with three.

See my answer here, it contains a working demo : https://stackoverflow.com/a/39557217/1008547

When you really want 3 colors, you could think of an extra element as the first-child of body with

position: fixed;
pointer-events: none;

And btw: Your z-index: 1000; is pretty bad.

Icomoon Custom font multiple colors

I don't believe this is possible using only the data-icon attribute.

You could use IcoMoon's icon- classes instead and use the before CSS pseudo selector on one, and the after selector on the second.

icon1:before {
    content: "A";
    color:red;
}

.icon2:after {
    color: blue;
    content: "B";
}

I have demonstrated this in a Fiddle.

Multicolored Icon Fonts

Okay i am going to do this in a step-by-step manner:

ILLUSTRATOR PART

1. in illustrator copy the icon into a new document.
2. then cut the one color.
3. press save as and save as SVG
4. then paste the one you cut and delete the other one.
5. save as another SVG.

ICOMOON

1. Really is a great site.
2. start the app.
3. import the svg and download an save.

and then this is the CSS I used for a one class solution to multicolored font icons:

CSS

.icon-earth{
        font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}
.icon-earth:after {
    content: "\e006";
    color:#F33;
    font-size:6em;

}
.icon-earth:before {
    content: "\e007";
    color:#0C0;
    font-size:6em;
    letter-spacing:-1em;
}

HTML

<div class="icon-earth"></div>

its quiet easy to interpret the CSS for you own needs, if help is need please shout and I will go through this step by step aswell...

And Finally Here is the JSFIDDLE, although i cant get custom Icon Fonts happening in JsFiddle...

Browser support is IE8 and up and then everything else i have checked..

IcoMoon Font Doubling Up

This is a really quick answer without anything to show/jfiddle - I also got this duplication and got round it by commenting out all classes with ':before'

For example:

.icon-twitter:before {
    content: "\e002";
}

This does get rid of the duplicate but is, imho, a hack. So I'm gonna look into something more suitable and will update this when done.

---

Related Topics