Easy jQuery Rating Widget With Font Awesome Icons - MagicRating

This is a jQuery plugin that allows you to integrate an HTML5 rating control with custom Font Awesome icons to your webpage.

How to use it:

1. Load the required Font Awesome iconic font and jQuery library in your html document.

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

2. Download and place the jQuery MagicRating plugin's script after JQuery library.

<script src="magicRating.js"></script>

3. Create an element to hold your rating control.

<span class="rating"></span>

4. Call the function on this element to generate a default rating control.

$('.rating').magicRatingInit();

5. Set the max/current rating values using the following HTML data attributes:

<span class="rating" 
      data-current-rating=3 
      data-max-mark=5
      >
</span>

6. Override the default rating icons:

<span class="rating" 
      data-icon-good="fa-star"
      data-icon-bad="fa-star-o"
      >
</span>

7. You can also config the rating controls directly in the JavaScript during init:

$('.rating').magicRatingInit({
  iconGood: "fa-star",
  iconBad: "fa-star-o",
  maxMark: 5,
  currentRating: 3
});

8. Get the current rating value:

$('.rating').magicRatingInit({
  success: function(magicRatingWidget, rating){
    alert(rating);
  }
});

---

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