Use font awesome star rating define by width

Question

Currently for reviews I use star rating that is displayed by css with background classes.
But I want to replace this by Font Awesome because a font is much sharper on high res screens.

The only problem is that the rating is defined dynamically by a width class in %.
I can not change the code into different div classes that define the width.

For example a score of 4,5 stars is displayed using the class width="80%;"

Max score is 5 stars.

It should look like this:

How can I replace this with Font Awesome stars?

See also this JSFiddle: https://jsfiddle.net/tLj2ybnu/8/

Answer 1

This answer includes two solutions. The first is pure CSS. You just set a class to indicate a score from 0 to 10. The second snippet is simpler and more flexible; it allows you to set a percentage in the tag itself.

In both examples I used stars from the Wingdings font, but you could use other fonts and characters or even a background image. The solution in both cases is to have a grey background of stars and a golden overlay that is clipped to the right width.

1: Predefined classes to indicate a value from 0 to 10

I think with just a bit of CSS you can simply do this. You could use a special font, but maybe Wingdings is also an option. It contains a couple of stars which you may use.

The snippet below shows that you can do this with only one element. Add the class score, and one of the classes s0 to s10 to indicate a score from 0 to 10. Of course, instead of using ::before and ::after pseudo-elements, you could add nested spans and give the yellow one a width of 80% in the style attribute, but in my example the score element is more detached from how it is displayed, which I think is a better approach.

The CSS is quite verbose, but with a preprocessor like SCSS, you can probably write this in a more compact way.

I'd choose one to ten, because you indicated you want half stars as well (which is common). By using a scale to 10, you can use integer values, which is more intuitive from a programmer perspective. You just have an integer score, which is then translated by CSS to half stars.

Of course you can do this with any symbol from any font.

.score {
  display: inline-block;
  font-family: Wingdings;
  font-size: 30px;
  color: #ccc;
  position: relative;
}
.score::before,
.score::after {
  content: "\2605\2605\2605\2605\2605";
  display: block;
}
.score::after {
  color: gold;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.score.s0::after {
  width: 0%;
}
.score.s1::after {
  width: 10%;
}
.score.s2::after {
  width: 20%;
}
.score.s3::after {
  width: 30%;
}
.score.s4::after {
  width: 40%;
}
.score.s5::after {
  width: 50%;
}
.score.s6::after {
  width: 60%;
}
.score.s7::after {
  width: 70%;
}
.score.s8::after {
  width: 80%;
}
.score.s9::after {
  width: 90%;
}
.score.s10::after {
  width: 100%;
}

The score is: <span class="score s7"></span>

2: Set the percentage straight in the tag

If you want to set the width in HTML specifically, you can't use ::before and ::after. You'll need an actual element for that. Actually, it makes the CSS a bit easier, because you don't need to predefine the widths. The HTML also isn't very complex. The span for the score gets one anonymous sub-element that has just the width set. You can specify any width from 0 to 100%.

The outer element (with the class) serves as a container, and generates the grey stars. The inner element generates the yellow stars overlaid on the grey ones.

.score {
  display: inline-block;
  font-family: Wingdings;
  font-size: 30px;
  color: #ccc;
  position: relative;
}
.score::before,
.score span::before{
  content: "\2605\2605\2605\2605\2605";
  display: block;
}
.score span {
  color: gold;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

The score is: <span class="score"><span style="width: 88%"></span></span>

Answer 2

Please check this JSFIDDLE link. Hope this solves your problem.

@import url(http:/netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
 .rating-box .rating:after {
  font-family: FontAwesome;
  content: "\f005";
  font-size: 13px;
  margin-right: 5px;
  vertical-align: top;
  line-height: 15px !important;
}
.rating-box {
  background: none;
  color: #eee;
}
.rating {
  color: yellow;
  float: left;
}
.disabled {
  color: #eee;
}

<div class="rating-box">
  <div class="rating"></div>
  <div class="rating"></div>
  <div class="rating"></div>
  <div class="rating"></div>
  <div class="rating disabled"></div>
</div>

Answer 3

If you want to use stars that are outlined, and therefore cannot use the color property, you can always do it a simple way.

1. create a container for your stars and give it the position: relative property
2. in that container, create a first element that contains 5 blank stars
3. in that same container, create a second element that contains 5 full stars, and give it those properties : position: absolute; top: 0; left: 0; white-space: nowrap; with the desired width