CSS for star ratings via FontAwesome

Question

I\'ve tried a few variations of CSS star ratings via different methods, and am trying to implement the following via FontAwesome rather than using a sprite. I want to be abl

Answer 1

I found this solution by Paales here: https://github.com/FortAwesome/Font-Awesome/issues/717

I think it's an elegant solution. It looks comparable to your code because the full stars overlap the empty stars and by using overflow: hidden and position: absolute. Now you can set the width of the full stars and show partly filled stars. If you want to show half stars you could change the width of the absolute positioned element with 10% increments.

.rating-box {
  position:relative;
  vertical-align: middle;
  font-size: 3em;
  font-family: FontAwesome;
  display:inline-block;
  color: #F68127;
}
.rating-box:before{
    content: "\f006 \f006 \f006 \f006 \f006";
  }
.rating-box .rating {
    position: absolute;
    left:0;
    top:0;
    white-space:nowrap;
    overflow:hidden;
    color: #F68127;
  }
  .rating-box .rating:before {
      content: "\f005 \f005 \f005 \f005 \f005";
    }

PS: Daniel Beck already gave you the answer about the mistake you made regarding white-space: no-wrap, so I suggest accepting that answer. I just wanted to share this solution because I think it is a very nice alternate approach.