CODEWITHSUNDEEP
htmlcss
Spets
Spets

Reputation: 2431

Font-Awesome fa-circle with two colors?

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!

https://i.sstatic.net/UCVct.jpg

enter image description here

Upvotes: 6

Views: 10246

Answers (4)

Dom
Dom

Reputation: 2095

The Font Awesome answer would be to use Font Awesome's font stacking to stack two squares on top of one another offset the the green one and then wrap a white border with a 50% radius around the fonts to mask the squares into a circle.

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;}

EDIT;

Actually fa-adjust is the icon I was looking for (I should read the question properly).

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;}

Upvotes: 1

ryanpcmcquen
ryanpcmcquen

Reputation: 6455

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>

To be totally honest though, there is no need to use Font Awesome to accomplish this, as you can see, I do the same thing with a plain old <div> in my example.

Upvotes: 6

Destination Designs
Destination Designs

Reputation: 683

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

use a gradient background

http://jsfiddle.net/ddpxug88/

Upvotes: 3

raney24
raney24

Reputation: 133

I don't think you can achieve this with font-awesome. Try using this: 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 demo here.

Upvotes: 2

Related Questions