New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Icon Request: fa-star-quarter-empty and fa-star-3/4-empty #4147
Comments
This request gets a definite fa-thumbs-o-up from me! USE CASE RE: the following page: We display our reviews found on various websites, singly and in aggregate. When we have something like a 4.94, we round that up to 5.0. When we have something like a 4.7, it ends up rounding down to 4.5 stars. Well that just stinks! I'd really much prefer to round it to 4.75 stars! |
For those looking for a solution this may help, idea is to overlay two sets of stars on top, one with overflow hidden then using javascript to set the width based on amount of stars required. http://codepen.io/denwo/pen/azjXzL HTML <div class="star_rating">2.35</div> SCSS .star_rating {
position: relative;
display: inline-block;
letter-spacing:5px;
&:before {
display:block;
font-size:500%;
top:0;
left:0;
font-family: FontAwesome;
content: "\f005\f005\f005\f005\f005";
color: #818181;
text-shadow: 0 2px darken(#818181,20%);
padding-left:5px;
}
span {
position:absolute;
top:0;
left:0;
height:100%;
display:block;
overflow:hidden;
&:before{
font-size:500%;
font-family: FontAwesome;
color: #ffbb00;
position: absolute;
left: 0;
top:0;
content:"\f005\f005\f005\f005\f005";
text-shadow: 0 1px darken(#ffbb00, 20%);
display:block;
padding-left:5px;
}
}
} Javascript $.fn.rating = function() {
var val = 0, size = 0, stars = 5;
return this.each(function(i,e){ val = parseFloat($(e).text()); size = ( $(e).width() / stars ); $(e).html($('<span/>').animate({ width: val * size }, 1000 ) ); });
}; |
+1 |
its 2019 now, has there been any progress made? Really need it! |
+1 |
At the moment the icons in Font-Awesome have a full star or a half star. I am requesting new icons for quarter and 3/4 filled stars.
It would be useful for display in a rating system.
The text was updated successfully, but these errors were encountered: