如何设置CSS3形状或图标的一部分颜色（Font Awesome等）？

Question

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

例如;

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

Answer 1

字体很棒的图标是文字。你不能用文字做到这一点。

你可以做的是绝对 - 将一个角色放在另一个角色的顶部，并在顶部使用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>