Skip to content
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

Open
marblemass opened this issue Aug 15, 2014 · 5 comments
Open

Icon Request: fa-star-quarter-empty and fa-star-3/4-empty #4147

marblemass opened this issue Aug 15, 2014 · 5 comments
Labels

Comments

@marblemass
Copy link

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
Copy link

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!

image

@jayjamero
Copy link

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
screen shot 2015-03-10 at 3 21 03 pm

@anmartini
Copy link

+1

@maurice85
Copy link

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

@hassan-tariq
Copy link

+1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

7 participants