Font-awesome: Icon Request: fa-star-quarter-empty and fa-star-3/4-empty

[marblemass]

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.

[nicowens]

This request gets a definite fa-thumbs-o-up from me!

USE CASE

RE: the following page:
http://www.popyachts.com/reviews

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!

[jayjamero]

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 ) ); });
};

Result

[anmartini]

+1

[maurice85]

its 2019 now, has there been any progress made? Really need it!