CSS for star ratings via FontAwesome
Solution 1:
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>Solution 2:
I found this solution by Paales here: https://github.com/FortAwesome/Font-Awesome/issues/717
I think it's an elegant solution. It looks comparable to your code because the full stars overlap the empty stars and by using overflow: hidden and position: absolute. Now you can set the width of the full stars and show partly filled stars. If you want to show half stars you could change the width of the absolute positioned element with 10% increments.
.rating-box {
position:relative;
vertical-align: middle;
font-size: 3em;
font-family: FontAwesome;
display:inline-block;
color: #F68127;
}
.rating-box:before{
content: "\f006 \f006 \f006 \f006 \f006";
}
.rating-box .rating {
position: absolute;
left:0;
top:0;
white-space:nowrap;
overflow:hidden;
color: #F68127;
}
.rating-box .rating:before {
content: "\f005 \f005 \f005 \f005 \f005";
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<div class="rating-box">
<div class="rating" style="width:30%;"></div>
</div>PS: Daniel Beck already gave you the answer about the mistake you made regarding white-space: no-wrap, so I suggest accepting that answer. I just wanted to share this solution because I think it is a very nice alternate approach.
Solution 3:
below is the Font Awesome 5 version of @Rob's answer above:
We can use font-family: "Font Awesome 5 Free"; font-weight: xxx; to switch between solid and outline
You can play around with the code at the following link.
/* rating box with fontawesome 5 inspired from - https://stackoverflow.com/a/49343426/6908282*/
.rating-box {
position: relative;
vertical-align: middle;
font-size: 3em; /* comment/edit this to change size */
font-family: FontAwesome;
display: inline-block;
color: #F68127;
}
.rating-box:before {
font-family: "Font Awesome 5 Free";
font-weight: 400;
content: "\f005 \f005 \f005 \f005 \f005";
}
.rating-box .rating {
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
overflow: hidden;
color: #F68127;
}
.rating-box .rating:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f005 \f005 \f005 \f005 \f005";
}<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<div class="rating-box">
<div class="rating" style="width:52%;"></div>
</div>