Cara Membuat Star Rating di Web

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti February 13, 2021

Di bawah ini kita akan mempelajarai cara membuat tampilan “rating bintang” sederhana dengan CSS.

Star Rating

Star rating biasa digunakan untuk dapat memberikan penilaian kepada suatu pelayanan yang diberikan. Berikut ini contohnya :

<!DOCTYPE html>
<html>
<head>
<!-- Font Awesome Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.checked {
  color: orange;
}
</style>
</head>
<body>

<h2>Contoh Star Rating</h2>
<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"></span>
<span class="fa fa-star"></span>

</body>
</html>

Cara Membuat Star Rating

Langkah 1) Tambahkan HTML:
Contoh

<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<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"></span>
<span class="fa fa-star"></span>

Langkah 2) Tambahkan CSS:
Contoh