How to use font Awesome instead of images in jquery rating stars

Question

I am using jquery.raty.min.js in order to show star rating ,In js method I have option to change the display start image like

starOff:"/images/star_none.png",

starOn:"/images/star_full.png"

But here i want to use font Awesome classes like

<i class="fa fa-star-o"></i>
<i class="fa fa-star"></i>

I have tried placing class like below

starOff:"<i class='fa fa-star-o'></i>",

starOn:"<i class='fa fa-star'></i>"

but its not working can anyone help in doing this.

Answer 1

The short answer to this question is to use the most recent update of Raty (2.7.0) (as of the last edit to this response) and look into the 'starType' attribute. When you're setting up the the element you will do something like this:

$('div').raty({
  // This is the config you need to change the tag from image to icon
  starType : 'i'
});

Here's some more detail... If you look into the CSS file and the fonts files, you will see how they set up the <i> tag to work with a specific font. From there its a simple task to identify what each class's :before content will be. First make sure to include FontAwesome, and then configure your CSS like so (specific to FontAwesome):

.cancel-on-png, .cancel-off-png, .star-on-png, .star-off-png, .star-half-png {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;

  /*This is the important part*/
  font-family: "FontAwesome";

  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  speak: none;
  text-transform: none;
}

.cancel-on-png:before {
  /*the "\f057" represents an unfilled circle with an x in it*/
  /*each of these can be configured to be whichever icon you would like*/
  /*fore more information on the icon code, look at the link listed below*/
  content: "\f057";
}

.cancel-off-png:before {
  content: "\f05c";
}

.star-on-png:before {
  content: "\f005";
}

.star-off-png:before {
  content: "\f006";
}

.star-half-png:before {
  content: "\f123";
}

The complete list of CSS content values for FontAwesome can be found here

---

The end product looks something like this:

<div>
  <i title="Cancel this rating!" class="raty-cancel cancel-off-png" data-alt="x"></i>&nbsp;
  <i data-alt="1" class="star-off-png" title="Bad"></i>&nbsp;
  <i data-alt="2" class="star-off-png" title="Below Average"></i>&nbsp;
  <i data-alt="3" class="star-off-png" title="Average"></i>&nbsp;
  <i data-alt="4" class="star-off-png" title="Above Average"></i>&nbsp;
  <i data-alt="5" class="star-off-png" title="Great"></i>
  <input name="score" type="hidden">
</div>

When configured like this:

$(div).raty({
  readOnly    : readOnly,
  cancel      : !readOnly,
  noRatedMsg  : 'This component has not been rated yet',
  half        : true,
  starType    : 'i',
  hints       : ['Bad', 'Below Average', 'Average', 'Above Average', 'Great'],
  click       : function(score, event) {
    console.log("The score is:", score);
  }
});

I know it's been 3 months, but I hope this helps someone!