html - Icomoon 自定义字体多种颜色

Question

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

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

但是它们都需要有不同的颜色。有可能做到这一点吗？

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

非常感谢任何帮助。

Answer 1

我认为仅使用数据图标属性是不可能的。

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

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

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

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