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!

[hassan-tariq]

+1

[sensibleworld]

This is a quick update to let folks know that we’re refining our icon request workflow behind the scenes, and as part of that we’re going through all open requests and filing them into several new buckets to be addressed.

In this case we’ve added this issue to our new list to be created! We can’t promise any firm timelines right now, but this will help us keep track of it.

We’ll update this issue when the icon is released into the wild 🙂