Minimal HTML List Based Star Rating Plugin - jQuery StarRating

Minimal HTML List Based Star Rating Plugin - jQuery StarRating
File Size: 4.16 KB
Views Total: 2888
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

StarRating is a really small and cross-browser jQuery rating system plugin which converts a standard HTML unordered list into a star rating control using Font Awesome for rating symbols.

How to use it:

1. Load the Font Awesome Iconic Font in the html file.

<link rel="stylesheet" href="">

2. Create an empty HTML unordered list on the page.

<ul id="starRating"></ul>

3. Load jQuery library and the jQuery StarRating plugin:

<script src="" 
<script src="jquery.starrating.js"></script>

4. Initialize the star rating control.


5. The primary CSS styles for the star rating control.

ul {
  list-style: none;
  padding: 0;

li {
  display: inline-block;
  font-size: 40px;
  color: #ccc;
  cursor: pointer;
}, li.hover { color: orange; }

ul.hover { color: #ccc }

6. Set the amount of rating stars.

<ul id="starRating"

7. Set the current amount of rating stars.

<ul id="starRating"

8. Execute a callback function after rating.

  callback: function (value) {}


This awesome jQuery plugin is developed by vulcandigital. For more Advanced Usages, please check the demo page or visit the official website.