5 Star Rating with Font Awesome Icons and CSS

The 5-star rating is a widely used feature for the rating system on a website. It helps to represent the rating number in a graphical view. You can can create 5 star rating view via Font Awesome icon library with CSS.
In this example code snippet, we will show you how to display 5 star rating with Font Awesome Icons and CSS. The only thing you need to set is the width as per the rating number in the style attribute of the rating DIV. Based on the width, the stars will be filled.

Before getting started with star rating with Font Awesome icons, include the Font Awesome library using the Font Awesome Kit embed code.

<script src="https://kit.fontawesome.com/3385c67820.js" crossorigin="anonymous"></script>

HTML Code:

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

CSS Code:

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

.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: #F1AA1D;
}

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