Simple Star Rating Plugin with jQuery and Font Awesome - Raterater

Simple Star Rating Plugin with jQuery and Font Awesome - Raterater
File Size: 7.29 KB
Views Total: 9926
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Raterater is an easy-to-use jQuery based 5 star rating widget that uses Font Awesome 4 for scalable & styleable star icons. 

How to use it:

1. Load the latest Font Awesome 4 in the head section of the web page.

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

2. Load the jQuery raterater plugin anywhere on the web page, but after loading jQuery library.

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

3. Create a container element for the star rating widget and use data-rating attribute to specify the current star fractions.

<div class="ratebox" data-id="1" data-rating="4.7"></div>

4. The core CSS to style the star rating widget.

.raterater-wrapper { overflow: visible; }

.raterater-layer i {
  display: block;
  position: absolute;
  overflow: visible;
  top: 0px;
  left: 0px;

.raterater-hover-layer { display: none; }

.raterater-hover-layer i,
.raterater-rating-layer i {
  width: 0px;
  overflow: hidden;

5. Call the function to enable the star rating widget.

$(function() {
$( '.demo' ).raterater({ 

// this function will be called when a rating is chosen
submitFunction: 'rateAlert', 

// allow the user to change their mind after they have submitted a rating
allowChange: true,

// width of the stars in pixels
starWidth: 100,

// spacing between stars in pixels
spaceWidth: 10,

numStars: 5,
isStatic: false,
step: false,


6. Callback function when a rating is chosen.

function rateAlert(id, rating){
  alert( 'Rating for '+id+' is '+rating+' stars!' );

7. Override star colors as you wish.

.raterater-bg-layer { color: #95a5a6; }

.raterater-hover-layer { color: #f1c40f; }

.raterater-hover-layer.rated { color: #f1c40f; }

.raterater-rating-layer { color: #f39c12; }

.raterater-outline-layer { color: #7f8c8d; }

Change logs:


  • Trigger .change() on input for reactive frameworks


  • add step option for ratings


  • Update raterater.jquery.js


  • JS update.

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