Easy Five-Star Rating Plugin with jQuery and Font Awesome - starrr

starrr is a very lightweight jQuery plugin for creating a five-star quality rating widget that uses Font Awesome Icon Font for rating symbols.

How to use it:

1. Load the Font Awesome Icon Font for the rating stars. You can also use something else.

<link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

2. Load jQuery library and the jQuery starrr plugin at the bottom of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="starrr.min.js"></script>

3. Create an empty element for the star rating widget.

<div class="starrr"></div>

4. A little CSS to style the rating stars.

.starrr { display: inline-block; }

.starrr i {
  font-size: 16px;
  padding: 0 1px;
  cursor: pointer;
  color: #ffd119;
}

Change log:

2016-04-08

• use an <a> tag for keyboard nav

2015-12-12

• v1.0.0

---

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