How to create a star rating system with CSS, HTML, and font-awesome icons. It is a simple CSS star rating system that we can optimize in any dynamic programming language and we can also easily change the style of this star rating widget like the color scheme, font size, icons, and etc.
HTML
<h2>Rate Our Services</h2>
<!-- Rating Star Using Font Awesome Icons -->
<div class="rating">
<i class="fas fa-star checked" title="1 star"></i>
<i class="fas fa-star checked" title="2 star"></i>
<i class="fas fa-star checked" title="3 star"></i>
<i class="fas fa-star" title="4 star"></i>
<i class="fas fa-star" title="5 star"></i>
</div>CSS
h2 {
font-family: arial;
font-weight: normal;
font-size: 24px;
}
.rating i {
color: #a2a2a2;
}
.rating .checked {
color: #FF5722;
}