Font-Awesome fa-circle с двумя цветами?

Question

Я пытаюсь получить полукруг, как на моей странице, но я борюсь немного с помощью фа фа-регулировка

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

На данный момент я не могу изменить левую сторону круга. Может ли мастер CSS помочь мне, чтобы я мог настроить два цвета круга? Я хочу, чтобы правая сторона была зеленой, а слева - серой.

Ниже представлен круг, который я хочу (в идеале), с теми же настройками CSS, что и «fa-circle». Я надеялся, что смогу скопировать CSS-код fa-circle, а затем создать некоторые настройки 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> в моем примере.

Answer 2

Я не думаю, что вы можете добиться этого с помощью шрифта-удивительного. Попробуйте использовать это: 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 демо here.

Answer 3

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

Answer 4

Удивительный ответ шрифт будет использовать Font Потрясающие в шрифте укладки в стек два квадрата поверх друг друга компенсируют зеленую одну, а затем обернуть белая граница с радиусом 50% вокруг шрифтов, чтобы замаскировать квадраты в круг.

Here's a starting point

<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 - это значок, который я искал (я должен правильно прочитать вопрос).

This is a better example using 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;}