FontAwesome: include FontAwesome (>= 4.x) (tip: use the CDN hosted version)

jQuery: include jQuery (1.x or 2.x) before including the plugin source

CDN hosted version for jqAwesomeStarRating plugin (minimized, gzipped)



Just one line of HTML. The plugin will generate the 'stars' as <i> elements and will generate a hidden input field (to be used in forms). You can specify the name of the input field (see below the data-name attribute)

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

Using data attributes

Use data-name to set the hidden input field name.

Use data-score to set a default value for the rating (i.e. how many stars). Value between 1 and 5.

<div class="star-rating" data-name="rating" data-score="3"></div>


CSS (customize away!)

Use the i selector to style the size and width of the stars.

Use the .fa-star to set color for active stars and .fa-star-o for not-active (empty) stars.

.star-rating i {
margin-right: 0.2em;
font-size: 16px;
cursor: pointer;

.star-rating .fa-star,
.star-rating .fa-star-half-o {
color: #f8a000;

.star-rating .fa-star-o {
color: #cccccc;



Call after DOM ready: $('.selector').awesomeStarRating(options)


name: the name of the hidden input field generated (not needed if data-name is used)

score: default number of stars selected (similar effect as data-score)

onChange: event callback function with one argument representing the selected/current rating (value between 1..5)

jQuery(function () {
onChange: function (score) {
if(score > 3) {
alert('Awesome! You give it ' + score + ' stars!');
} else if ( score > 1 ) {
alert('You give it ' + score + ' stars. That\'s ok :-)');
} else {
alert('Oh... just one star? Really?');


Download & profit!

CDN hosted version for jqAwesomeStarRating plugin (minimized, gzipped)


Need help?

Check the issues section


Fork it and contribute!



License & Credits

Many thanks to the amazing projects FontAwesome and jQuery.

Licensed under MIT license.

Copyright (c) 2014 Radu Cugut /

Product of