Geek Answers Handbook

Icomoon Custom Font

I use Icomoon to create custom font icons, I have a situation where the icons should be in the same range, for example:

<span class="glyph2" aria-hidden="false" data-icon="&#xe000; &#xe001;"></span>

But they must both be of different colors. Is it even possible to do this?

And here is a JSFIDDLE containing all the code, but I can't get custom fonts working in jsfiddle.

Any help is greatly appreciated.

+4
source share
2 answers

I do not think this is possible using only the data-icon attribute.

Instead, you can use the IcoMoon icon- classes 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 demonstrated this in Fiddle .

+2
source

I could not demonstrate this in the violin, but it looks like it can work.

IcoMoon are styled in: in front of the pseudo-selector. Accordingly, the css pseudo-selector with the first letter should work on the generated content and, thus, include: before the data.

So including

 .glyph2:first-letter {background-color: blue; color:white}

You should be able to give this view the first icon (generated in a: in front of the pseudo-element with 2 custom characters).

He worked for me locally, but I could not get him to work on the violin.

0
source

More articles:


All Articles