Icomoon自定义字体多种颜色

Question

我正在使用Icomoon创建自定义字体图标，我的情况是图标需要在同一范围内，例如：

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

但他们都需要不同的颜色。完全可以这样做吗？

这是包含所有代码的JSFIDDLE，但我似乎无法在jsfiddle中使用自定义字体。

任何帮助非常感谢。

Answer 1

我认为只使用data-icon属性是不可能的。

您可以使用IcoMoon的icon-类，并在一个上使用before CSS伪选择器，在第二个上使用after选择器。

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

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

我已经在Fiddle中证明了这一点。

Answer 2

我无法在小提琴中证明这一点，但看起来它可以起作用。

IcoMoon的样式是：在伪选择器之前。根据css，第一个字母的伪选择器应该对生成的内容起作用，因此包括：在数据之前。

所以，包括

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

你应该能够将这个外观赋予第一个图标（在...中生成） a：在具有2个自定义字符的伪元素之前。）

它在当地对我有用，但我无法让它在小提琴中工作。