javascript - 如何设置部分 CSS3 形状或图标(Font Awesome 等)的颜色？

Question

我想使用 CSS 或 Javascript 使形状的一部分具有不同的颜色。

例如；

我想以编程方式更改绿色级别。

Answer 1

Font Awesome 图标是文本。你不能用文本做到这一点。

你可以做的是将一个字符绝对放置在另一个字符之上，并在顶部使用 overflow:hidden，根据你需要的高度调整它的高度以显示下半部分.

像这样:

.icon {
    position:relative;
    color:#000;
    font-size:50px
}

.overlay {
    position:absolute;
    top:0;
    left:0;
    color: #f00;
    height:25px;
    overflow:hidden;
}

HTML:

<div class="icon">X<div class="overlay">X</div></div>