Issue
I'm generating a rating system using font-awesome fa-heart class. It is working fine by colouring the full heart, but I'm in trouble when trying to fill it in red only the first half of the heart. I have been searching but always are stars and not a half-heart, always full heart and not from font-awesome.
Font awesome version used 4.0.3 and cannot be changed...
Any trick to do that?
.full {
color:red;
}
.half {
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">
<div class="rating-love ">
<span class="fa fa-heart full"></span>
<span class="fa fa-heart full"></span>
<span class="fa fa-heart full"></span>
<span class="fa fa-heart full"></span>
<span class="fa fa-heart half"></span>
<a href="#reviews"><span>23 Review(s)</span></a>
</div>
Solution
Here is another idea where you can easily have any kind of rating by simply adjusting a CSS variable:
.rating-love {
display: inline-grid!important;
}
.rating-love:before,
.rating-love:after {
content: "\f004 \f004 \f004 \f004 \f004";
grid-area: 1/1;
}
.rating-love:after {
white-space: nowrap;
overflow: hidden;
width: var(--w);
color: red;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">
<div class="rating-love fa" style="--w: 50%;"></div>
<br>
<div class="rating-love fa" style="--w: 30%;"></div>
<br>
<div class="rating-love fa" style="--w: 80%;"></div>
Answered By - Temani Afif
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.