Henk Z Henk Z -4 years ago 97
CSS Question

Use font awesome star rating define by width

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: enter image description here

How can I replace this with Font Awesome stars?

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

Answer Source

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.

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.

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download