Input Field Based Star Rating Plugin With jQuery - simple-rating

A dead simple jQuery plugin that converts a normal input field into a 5-star quality/product/post rating system using Font Awesome icons.

How to use it:

1. Add the necessary jQuery library and Font Awesome iconic font to the web page.

<link rel="stylesheet" href="/path/to/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>

2. Add the jQuery simple-rating plugin's files to the page.

<link rel="stylesheet" href="css/simple-rating.css">
<script src="js/simple-rating.js"></script>

3. Call the function and done.

$(document).ready(function(){
  $('.rating').rating();
});

4. The plugin will convert your input field...

<input class="rating">

5. Into these...

<input class="rating" type="hidden" value="3">

<div class="simple-rating star-rating">
  <i class="fa fa-star" data-rating="1"></i>
  <i class="fa fa-star" data-rating="2"></i>
  <i class="fa fa-star" data-rating="3"></i>
  <i class="fa fa-star-o" data-rating="4"></i>
  <i class="fa fa-star-o" data-rating="5"></i><
/div>

---

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