How to set color of a part of CSS3 shapes or icons (Font Awesome etc.)?

Question

I want to make a part of shape different color using CSS or Javascript.

For example;

I want to change green level programmatically.

Answer 1

Font-awesome icons are text. You cant do that with text.

What you can do is absolutely-position one character on top of the other and using overflow:hidden on the top one, adjust its height to reveal the bottom-half according to the height you need.

Like this:

.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>