CSS for Star Ratings via Fontawesome

CSS for star ratings via FontAwesome

The overflow:hidden needs to be on 'stars-active' (the sized element) instead of 'score-wrap' (which never overflows.) You can use white-space: nowrap to prevent the stars from wrapping to the next line within the hidden-overflow container.

.score {  display: block;  font-size: 16px;  position: relative;  overflow: hidden;}
.score-wrap {  display: inline-block;  position: relative;  height: 19px;}
.score .stars-active {  color: #EEBD01;  position: relative;  z-index: 10;  display: inline-block;  overflow: hidden;  white-space: nowrap;}
.score .stars-inactive {  color: grey;  position: absolute;  top: 0;  left: 0;  -webkit-text-stroke: initial;  /* overflow: hidden; */}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<span class="score">    <div class="score-wrap">        <span class="stars-active" style="width:88%">            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>        </span><span class="stars-inactive">            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>        </span></div></span>
<span class="score">    <div class="score-wrap">        <span class="stars-active" style="width:50%">            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>        </span><span class="stars-inactive">            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>        </span></div></span>
<span class="score">    <div class="score-wrap">        <span class="stars-active" style="width:100%">            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>        </span><span class="stars-inactive">            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>        </span></div></span>
<span class="score">    <div class="score-wrap">        <span class="stars-active" style="width:0%">            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>        </span><span class="stars-inactive">            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>        </span></div></span>

Use font awesome star rating define by width

This answer includes two solutions. The first is pure CSS. You just set a class to indicate a score from 0 to 10. The second snippet is simpler and more flexible; it allows you to set a percentage in the tag itself.

In both examples I used stars from the Wingdings font, but you could use other fonts and characters or even a background image. The solution in both cases is to have a grey background of stars and a golden overlay that is clipped to the right width.

1: Predefined classes to indicate a value from 0 to 10

I think with just a bit of CSS you can simply do this. You could use a special font, but maybe Wingdings is also an option. It contains a couple of stars which you may use.

The snippet below shows that you can do this with only one element. Add the class score, and one of the classes s0 to s10 to indicate a score from 0 to 10. Of course, instead of using ::before and ::after pseudo-elements, you could add nested spans and give the yellow one a width of 80% in the style attribute, but in my example the score element is more detached from how it is displayed, which I think is a better approach.

The CSS is quite verbose, but with a preprocessor like SCSS, you can probably write this in a more compact way.

I'd choose one to ten, because you indicated you want half stars as well (which is common). By using a scale to 10, you can use integer values, which is more intuitive from a programmer perspective. You just have an integer score, which is then translated by CSS to half stars.

Of course you can do this with any symbol from any font.

.score {  display: inline-block;  font-family: Wingdings;  font-size: 30px;  color: #ccc;  position: relative;}.score::before,.score::after {  content: "\2605\2605\2605\2605\2605";  display: block;}.score::after {  color: gold;  position: absolute;  top: 0;  left: 0;  overflow: hidden;}
.score.s0::after {  width: 0%;}.score.s1::after {  width: 10%;}.score.s2::after {  width: 20%;}.score.s3::after {  width: 30%;}.score.s4::after {  width: 40%;}.score.s5::after {  width: 50%;}.score.s6::after {  width: 60%;}.score.s7::after {  width: 70%;}.score.s8::after {  width: 80%;}.score.s9::after {  width: 90%;}.score.s10::after {  width: 100%;}

The score is: <span class="score s7"></span>

FontAwesome CSS Stars Half Rating

You cannot modify that without modifying the html.
Just replace the needed icon with

<i class="fa-solid fa-star-half"></i>

How to fill the first two stars in font awesome star rating?

.filled is not specific enough, use span.star.filled
Moreover, the icons are actually styled through :before, so use span.star.filled:before{ color:#e3cf7a; }
If you want the star to be filled, add content:"\f005";, too.

But this is probably still not what you want; you might not have noticed, but the .rating class changes the text direction (unicode-bidi:bidi-override; direction:rtl;).

So, you'd need to apply the filled class to the last two span tags.

how to replace default woocomerce star raiting icon with fontawesome?

You were using the wrong codes.

.woocommerce .star-rating:before {  font-family: 'FontAwesome' !important;  content: '\f10c\f10c\f10c\f10c\f10c' !important;  color: #d5d5d5 !important;}
.woocommerce .star-rating span:before {  font-family: 'FontAwesome' !important;  content: '\f111\f111\f111\f111\f111' !important;  color: #FF9800 !important;}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/><div class="woocommerce">  <div class="star-rating"><span></span></div></div>

CSS Font-awesome multi star rating

The problem is your input name is same for all both group. change all input name for all group set.

the HTML

<h1>Pure CSS Star Rating Widget 1</h1>
<fieldset class="rating">
    <input type="radio" id="star5a" name="ratinga" value="5" checked/><label class = "full" for="star5a" title="Awesome - 5 stars"></label>
    <input type="radio" id="star4halfa" name="ratinga" value="4 and a half" /><label class="half" for="star4halfa" title="Pretty good - 4.5 stars"></label>
    <input type="radio" id="star4a" name="ratinga" value="4" /><label class = "full" for="star4a" title="Pretty good - 4 stars"></label>
    <input type="radio" id="star3halfa" name="ratinga" value="3 and a half" /><label class="half" for="star3halfa" title="Meh - 3.5 stars"></label>
    <input type="radio" id="star3a" name="ratinga" value="3" /><label class = "full" for="star3a" title="Meh - 3 stars"></label>
    <input type="radio" id="star2halfa" name="ratinga" value="2 and a half" /><label class="half" for="star2halfa" title="Kinda bad - 2.5 stars"></label>
    <input type="radio" id="star2a" name="ratinga" value="2" /><label class = "full" for="star2a" title="Kinda bad - 2 stars"></label>
    <input type="radio" id="star1halfa" name="ratinga" value="1 and a half" /><label class="half" for="star1halfa" title="Meh - 1.5 stars"></label>
    <input type="radio" id="star1a" name="ratinga" value="1" /><label class = "full" for="star1a" title="Sucks big time - 1 star"></label>
    <input type="radio" id="starhalfa" name="ratinga" value="half" /><label class="half" for="starhalfa" title="Sucks big time - 0.5 stars"></label>
</fieldset>

<div> <br><br><br><div>
<h1>Pure CSS Star Rating Widget 2</h1>
<fieldset class="rating">
    <input type="radio" id="star5b" name="ratings" value="5" /><label class = "full" for="star5b" title="Awesome - 5 stars"></label>
    <input type="radio" id="star4halfb" name="ratings" value="4 and a half" /><label class="half" for="star4halfb" title="Pretty good - 4.5 stars"></label>
    <input type="radio" id="star4b" name="ratings" value="4" /><label class = "full" for="star4b" title="Pretty good - 4 stars"></label>
    <input type="radio" id="star3halfb" name="ratings" value="3 and a half" /><label class="half" for="star3halfb" title="Meh - 3.5 stars"></label>
    <input type="radio" id="star3b" name="ratings" value="3" checked/><label class = "full" for="star3b" title="Meh - 3 stars"></label>
    <input type="radio" id="star2halfb" name="ratings" value="2 and a half" /><label class="half" for="star2halfb" title="Kinda bad - 2.5 stars"></label>
    <input type="radio" id="star2b" name="ratings" value="2" /><label class = "full" for="star2b" title="Kinda bad - 2 stars"></label>
    <input type="radio" id="star1halfb" name="ratings" value="1 and a half" /><label class="half" for="star1halfb" title="Meh - 1.5 stars"></label>
    <input type="radio" id="star1b" name="ratings" value="1" /><label class = "full" for="star1b" title="Sucks big time - 1 star"></label>
    <input type="radio" id="starhalfb" name="ratings" value="half" /><label class="half" for="starhalfb" title="Sucks big time - 0.5 stars"></label>
</fieldset>

the CSS

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

fieldset, label { margin: 0; padding: 0; }
body{ margin: 20px; }
h1 { font-size: 1.5em; margin: 10px; }

/****** Style Star Rating Widget *****/

.rating { 
  border: none;
  float: left;
}

.rating > input { display: none; } 
.rating > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating > .half:before { 
  content: "\f089";
  position: absolute;
}

.rating > label { 
  color: #ddd; 
 float: right; 
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85;  }

How to use Star rating of Font-awesome with Django?

I ended up using Raty. If you are looking for a simple and clean solution, I found this the easiest.

$('#star').raty('score');                   // Get the current score.

CSS for Star Ratings via Fontawesome