Select And Font Awesome Based Star Rating Plugin For jQuery

Just another jQuery, <select> based star rating system which allows you to use any Font Awesome 4 icons for rating symbols.

See Also:

• 10 Best Rating Systems In JavaScript & Pure CSS

How to use it:

1. You have to load jQuery library and Font Awesome icon font properly in the webpage.

<script src="/path/to/jquery.min.js"></script>
<link href="/path/to/font-awesome.min.css" rel="stylesheet">

2. Download and load the jquery.fontstar.js script after jQuery.

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

3. Create a normal select list for the rating system.

<select name="" class="star">
  <option value="">--</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4" selected>4</option>
  <option value="5">5</option>
</select>

4. Call the function on the select and done.

$('.star').fontstar();

5. Plugin's default options.

$('.star').fontstar({

  // custom icons
  icon: "fa fa-star-o",
  iconfull: "fa fa-star",

  // color on hover
  hovercolor: "#F39F25",

  // star color
  starcolor: "#969696",

  // is selectable
  selectable: true
  
});

6. Output the user selected value:

$('.star').fontstar({
  // options here
},function(value,self){
  console.log("hello "+value);
});

Changelog:

2021-02-24

• Fix callback function

2016-07-27

• added default pointer on only displaying star

---

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