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

Question

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

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

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

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

非常感谢任何帮助。

score 1 · Accepted Answer

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

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

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

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

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

score 0 · Accepted Answer

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

IcoMoon 的样式在 :before 伪选择器中。因此，对于 css，首字母伪选择器应该对生成的内容起作用，因此包括 :before 数据。

所以，包括

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

您应该能够将这种外观赋予第一个图标（在具有 2 个自定义字符的 :before 伪元素中生成）。

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

2 回答 2