How to create a simple star rating look with CSS?
The star ratings are popular on e-commerce websites. It is used to rate the service or products. We can create this star rating look with CSS easily. In this tutorial, we will learn to create a star-rating look.
Creating a star rating with Font Awesome library
We can add a star icon using Font Awesome icon library. Add the external link of the font awesome library to the code and use fa fa-star for the star icon. Use it within <span> or <i> tag. We can use the CSS property to customize this star icon.
Example: Creating a star rating look with CSS
In this example, we have created a five-star rating system. The rated star is colored yellow and the unrated star is colored black.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.checked {
color: yellow;
}
.fa-star {
font-size: 20px;
}
</style>
</head>
<body>
<h2> Star Rating </h2>
<div class="container">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"> 2-star rating</span>
</div>
<div class="container">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"> 4-star rating</span>
</div>
</body>
</html>
Output
Here is the output of the above program.
Creating star-look with the CSS property
The clip-path property can be used to draw a polygon that actually looks like a star. The polygon should be added with background-color and some width and height. To align the star in the same line use display: inline-block property.
Example: creating a star-look with CSS
In this example, we have created a five-star rating look with the rated yellow star and unrated black star.
Conclusion
In this tutorial, we have learned to create a star-rating look with CSS. We have shown you two ways to do so. Either use font awesome library or clip-path property to do so. The clip-path property may be browser-dependent.
