两种颜色的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

- Spets

---

使用 :after 来创建效果。这里有一个例子：http://jsfiddle.net/yongchuc/8gzzrtwv/ - Chris Yongchu

字体只能是一种颜色。 - Daniel Tate

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来实现这个功能，正如你所看到的，在我的示例中，我使用一个简单的旧式

标签就能达到同样的效果。

- ryanpcmcquen

---

这基本上是完美的，只是我在将其调整为约12-15像素时遇到了困难。当我改变宽度/高度时，它会出现故障。 - Spets

@Spets在这里的14px看起来不错：https://jsfiddle.net/ryanpcmcquen/402p7sf1/。也许你可以告诉我'borks out'是什么意思？ - ryanpcmcquen

我已经用上面的CSS使它工作了。谢谢，伙计。我需要更好地掌握背景线性渐变。 - Spets

Answer 2

.badge {
    color: #FFF;
    height: 50px;
    width: 50px;
    text-align: center;
    line-height: 50px;
    background-image: linear-gradient(to left, green, green 50%, #777777 50%);
    border-radius: 100%;
}

<i class="badge fa fa-adjust" ></i>

使用渐变背景

http://jsfiddle.net/ddpxug88/

- Destination Designs

Answer 3

我认为你无法使用font-awesome实现这一点。尝试使用这个链接中的方法：http://bryanhadaway.com/how-to-create-circles-with-css/

   .left {
       border-top-left-radius:50px; float:left;
       border-bottom-left-radius:50px;
       background:blue;
   }

在这里查看 jsfiddle 示例链接。

- raney24

Answer 4

使用Font Awesome的字体堆叠功能，将两个正方形叠在一起并偏移绿色正方形，然后在字体周围包裹一个50%半径的白色边框，以将正方形遮盖成圆形。 这里是一个起点

<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x grey"></i>
  <i class="fa fa-square fa-stack-2x green"></i>
</span>

.green { color:green;left:50%;}
.grey { color:grey;}

编辑；

实际上，fa-adjust是我正在寻找的图标（我应该仔细阅读问题）。

这是一个更好的示例，使用font-awesome

<span class="fa-stack fa-lg">
    <i class="fa fa-adjust fa-stack-2x green"></i>
  <i class="fa fa-adjust fa-rotate-180 fa-stack-2x grey"></i>
</span>

.green { color:green;}
.grey { color:grey;}

- Dom