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.

Features:

• 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.

$('.rating').starRating({
  // ...
});

5. Customize the stars.

$('.rating').starRating({
  starIconEmpty: 'far fa-star',
  starIconFull: 'fas fa-star',
  starColorEmpty: 'lightgray',
  starColorFull: '#FFC107',
  starsSize: 4, // em
  stars: 5,
});

6. Customize the feedback message.

$('.rating').starRating({
  showInfo: true,
  titles: ["Very Bad", "Poorly", "Medium", "Good", "Excellent!"],
});

7. Customize name of the hidden rating input.

$('.rating').starRating({
  inputName: 'rating',
});

8. Trigger a function when the rating value changes.

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

Changelog:

2022-11-05

• 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.