Easy Star Rating System With jQuery And Font Awesome - star-rating.js

File Size: 5.45 KB
Views Total: 8161
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Easy Star Rating System With jQuery And Font Awesome - star-rating.js

star-rating.js is a simple, lightweight, responsive, customizable, nice-looking star rating system built with jQuery and Font Awesome 6 iconic font.


  • Custom rating symbols.
  • Custom star size.
  • Allows to specify the number of stars.
  • Custom feedback messages.
  • Store rating values in a hidden input.

How to use it:

1. Load the jquery.star-rating.js JavaScript after jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.star-rating.js"></script>

2. Load the latest Font Awesome Iconic Font for stars. You can use any other icon libraries or even emoji for stars by overriding the icon options (see below).

<link rel="stylesheet" href="/path/to/cdn/font-awesome/all.min.css" />

3. Create a DIV container to hold the rating system.

<div class="rating"></div>

4. Call the function on the DIV container to create a default 5-star rating system.

  // ...

5. Customize the stars.

  starIconEmpty: 'far fa-star',
  starIconFull: 'fas fa-star',
  starColorEmpty: 'lightgray',
  starColorFull: '#FFC107',
  starsSize: 4, // em
  stars: 5,

6. Customize the feedback message.

  showInfo: true,
  titles: ["Very Bad", "Poorly", "Medium", "Good", "Excellent!"],

7. Customize name of the hidden rating input.

  inputName: 'rating',

8. Trigger a function when the rating value changes.

$(document).on('change', '.rating', function (e, stars, index) {
  alert(`Thx for ${stars} stars!`);



  • Use Font Awesome 6.x instead

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