Select And Font Awesome Based Star Rating Plugin For jQuery

Select And Font Awesome Based Star Rating Plugin For jQuery
File Size: 2.98 KB
Views Total: 2088
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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

See Also:

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>

4. Call the function on the select and done.


5. Plugin's default options.


  // 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:

  // options here
  console.log("hello "+value);



  • Fix callback function


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