Font-Awesome fa-circle with two colors?

Question

I'm trying to get a half circle like onto my page but I'm struggling a bit using fa fa-adjust

<i class="fa fa-adjust" style="color: green"></i>

At this point I cant change the left side of the circle. Can a CSS wizard please help me so I can configure the two colors of the circle? I want the right side to be green and the left to be gray.

Below is the circle I want(ideally), WITH the same CSS settings as the "fa-circle". I was hoping I could copy the fa-circle CSS and then create some CSS tweaks. When I navigated to the fontawesome.css file there were basically codes for each type and thus I couldn't make any mods.

Any help would be great. Thanks guys!

http://imgur.com/nRRxbxY

Answer 1

Use a CSS gradient:

https://jsfiddle.net/ryanpcmcquen/n5kjjvx9/

.fa-adjust, .no-font-needed {
    color: transparent;
    background: linear-gradient(to right, #868789 0%, #868789 50%, #008000 50%, #008000 100%);
    border-radius: 50%;
    width: 300px;
    height: 300px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet" />
<i class="fa fa-adjust"></i>

<p>Although, you do not need Font Awesome to do this:</p>
<div class="no-font-needed"></div>

老实说，没有必要使用 Font Awesome 来实现这一点，正如您所看到的，<div>在我的示例中，我用一个普通的 old 做同样的事情。