Easy jQuery Rating Widget With Font Awesome Icons - MagicRating

File Size: 6.36 KB
Views Total: 990
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


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

<span class="rating" 

6. Override the default rating icons:

<span class="rating" 

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

  iconGood: "fa-star",
  iconBad: "fa-star-o",
  maxMark: 5,
  currentRating: 3

8. Get the current rating value:

  success: function(magicRatingWidget, rating){

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