Skip to main content

Simple Star Rating Icons | HTML And CSS

by Rustcode
Nowadays we hear a lot about star ratings because everyone wants to improve their own services and products. Star rating UI design is very simple and easy but applying with is a bit difficult because we have put some maths data to calculate the rating.

In this article, we will see the simple star rating icon, and how it can be created. At the moment we are not applying any kind of script because we are not using it on the data of any product. Here we will see How to create a normal rating icon through CSS and HTML.


1. HTML STRUCTURE 

<!DOCTYPE html>
<html>
<head>
	<title>Simple Star Rating Icons</title>	
	<link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>


2. FONT-AWESOME PLUGIN

The basic HTML structure is ready for us, now let's include the font-awesome plugin in this HTML document. You can download this plugin from here. 

<!DOCTYPE html>
<html>
<head>
	<title>Simple Star Rating Icons</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="style.css">
</head>

<body>

	main content.

</body>
</html>


3. CONTENT

<body>
   <div class="container">
      <span class="fa fa-star fa-3x checked"></span>
      <span class="fa fa-star fa-3x checked"></span>
      <span class="fa fa-star fa-3x checked"></span>
      <span class="fa fa-star fa-3x"></span>
      <span class="fa fa-star fa-3x"></span>
   </div>
</body>


4. CSS

.container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.checked{
  color: orange;
}


5. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also learn about web development from there.


6. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download the source code, you can download it from here and change this according to your need.


RELATED POST:

Comments

Post a Comment