Multi color on font awesome icon with css

4
votes

I had upgraded my rating plugin with font awesome icons instead of images. I am facing problem on half star rated which I can't replace white color on the fa-star-half-o icon. I would like to replace the white color with grey color similar to expected result below.

Please help

Code :

<div class="ratingbox"><i class="fa fa-star"></i><i class="fa fa-star">
</i><i class="fa fa-star-half-o"></i><i class="fa fa-star unrated"></i>
<i class="fa fa-star enlang unrated"></i></div>


i
{
  float:left
}
.ratingbox
{
    display: block;
    clear: both;
}
.fa-star-half-o,.fa-star
{
    color: #ffab00;
  
}
.rated{
    color: #ffab00;
    cursor: pointer;
}

.unrated{
    color: #757575;
    cursor: pointer;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="ratingbox">
<i class="fa fa-star"></i><i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i><i class="fa fa-star unrated"></i><i class="fa fa-star enlang unrated"></i>
</div>

Current Result

enter image description here

Expected Result

enter image description here

2
cssfont-awesome

2 Answers

3
votes

Everything is possible in web design but maybe you manage to use some trick:

i
{
  float:left;
  position: relative;
}
.ratingbox
{
    display: block;
    clear: both;
}
.fa-star-half-o,.fa-star
{
    color: #ffab00;
  
}
.rated{
    color: #ffab00;
    cursor: pointer;
}

.unrated{
    color: #757575;
    cursor: pointer;
}

.fa-star-half-empty:after, .fa-star-half-full:after, .fa-star-half-o:after {
    content: "\f123";
    transform: rotateY(-180deg);
    display: inline-block;
    left: 6px;
    position: absolute;
    top: 0;
    color: #757575;
    overflow: hidden;
    width: 8px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="ratingbox">
<i class="fa fa-star"></i><i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i><i class="fa fa-star unrated"></i><i class="fa fa-star enlang unrated"></i>
</div>

Note: I just add fa-star-half-o character to after element, i mean this content: "\f123"; then reverse it transform: rotateY(-180deg); and half width and absolute position you can see what's happened here:

.fa-star-half-empty:after, .fa-star-half-full:after, .fa-star-half-o:after {
    content: "\f123";
    transform: rotateY(-180deg);
    display: inline-block;
    left: 6px;
    position: absolute;
    top: 0;
    color: #757575;
    overflow: hidden;
    width: 8px;
}

It's not clean but better than nothing!

2
votes

You can use CSS ::before and ::after pseudo-elements refer here for CSS unicodes.

  1. Add an extra .unrated star
  2. Add 2 pseudo-elements to the half-o ; ::before and ::after
  3. Make sure that the pseudo-elements are absolute and the half-o is relative.
  4. And to cleanly fill the rightside of half star, explicitly set the ::before pseudo-element to color:grey.

Demo

i {
  float: left;
}

.ratingbox {
  display: block;
  clear: both;
}

.fa-star-half-o,
.fa-star {
  color: #ffab00;
}

.rated {
  color: #ffab00;
  cursor: pointer;
}

.unrated {
  color: #757575;
  cursor: pointer;
}

.fa-star-half-o {
  position: relative;
}


.fa-star-half-o:after {
  font-family: FontAwesome;
  content: '\f089';
  position: absolute;
  z-index: 1;
}

.fa-star-half-o:before {
  font-family: FontAwesome;
  content: '\f089';
  position: absolute;
  color: grey;
  z-index: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="ratingbox">
  <i class="fa fa-star"></i><i class="fa fa-star"></i>
  <i class="fa fa-star-half-o"></i><i class="fa fa-star unrated"></i><i class="fa fa-star unrated"></i><i class="fa fa-star unrated"></i>
</div>