html - Font-Awesome fa-circle 有两种颜色？

Question

我正在尝试在我的页面上添加半个圆圈，但我在使用 fa fa-adjust 时遇到了一些困难

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

此时我无法更改圆圈的左侧。 CSS 向导可以帮助我配置圆的两种颜色吗？我希望右侧为绿色，左侧为灰色。

下面是我想要的圆(理想情况下)，具有与“fa-circle”相同的 CSS 设置。我希望我可以复制 fa-circle CSS，然后创建一些 CSS 调整。当我导航到 fontawesome.css 文件时，基本上每种类型都有代码，因此我无法制作任何模组。

任何帮助都会很棒。谢谢大家!

http://imgur.com/nRRxbxY

Answer 1

使用 CSS 渐变:

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> 做同样的事情。在我的示例中。