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

标签 html css

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

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

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

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

非常感谢任何帮助。

最佳答案

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

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

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

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

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

关于html - Icomoon 自定义字体多种颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15025847/

相关文章:

html - 如何使 Flex Grid 宽度相对于最大 child 的宽度?

jquery - 如何使用 jquery 将背景大小设置为 100%?

Javascript:this.value 函数不工作

javascript - 从 javascript 引用时,内联 CSS 不起作用

html - 让一个 div 与另一个 div 重叠?

html - 如何居中对齐包含 float 元素的 div?

html - 文本溢出 : ellipsis isn't working-why?

javascript - 在鼠标悬停在 gridview 行中显示图像

javascript - 路径如何在 css 和 js 中工作

html - Css 图片定位问题