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

below is the Font Awesome 5 version of @Rob's answer above:

We can use font-family: "Font Awesome 5 Free"; font-weight: xxx; to switch between solid and outline

You can play around with the code at the following link.

/* rating box with fontawesome 5 inspired from - https://stackoverflow.com/a/49343426/6908282*/

.rating-box {
  position: relative;
  vertical-align: middle;
  font-size: 3em; /* comment/edit this to change size */
  font-family: FontAwesome;
  display: inline-block;
  color: #F68127;
}

.rating-box:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  content: "\f005 \f005 \f005 \f005 \f005";
}

.rating-box .rating {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  color: #F68127;
}

.rating-box .rating:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f005 \f005 \f005 \f005 \f005";
}