Font-awesome: The icon-star-half should be a complete star with half filling

[anunos]

I really thing that icon-star-half should be a complete star so we could implement star rating with five icons of the same size. Please see attached images.

Greate work Dave.

[tomByrer]

I think the above idea is great, but perhaps it should be added with a new name "icon-star-halfempty", & the existing "icon-star-half" should be left-aligned (eg as wide as a full star)? This will allow those who don't want to show empty stars.

[srswanson]

+1

I have an app where I always display 5 stars for the rating scale and having a 1/2 full star would look much better than the current 1/2 star.

[paales]

This can be easily achieved with some code, no need for a half empty star.

.rating-box {
  position:relative;
  vertical-align: middle;
  font-size: 3/3em;
  font-family: FontAwesome;
  display:inline-block;
  color: lighten(@grayLight, 25%);

  &:before{
    content: "\f006 \f006 \f006 \f006 \f006";
  }

  .rating {
    position: absolute;
    left:0;
    top:0;
    white-space:nowrap;
    overflow:hidden;
    color: #F68127;
    &:before {
      content: "\f005 \f005 \f005 \f005 \f005";
    }
  }
}

HTML (just set the percentage):

<div class="rating-box">
    <div class="rating" style="width:70%;"></div>
</div>

Result:

[srswanson]

Cool! This works great. Thanks for the tip!

[davegandy]

Dupe of #112