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

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!

I don't think there is a simple way without modifying a little bit the plugin itself. If you look at the jquery.raty.js file, search for:

$('<img />', { src : icon, alt: i, title: title }).appendTo(this);

That's creating image elements,

What you need to Do is to create the icon instead. I think that changing it for somethihng like:

$('<i />', { class : icon  }).appendTo(this);

But usage would be:

starOff:"fa fa-star-o",

starOn:"fa fa-star"

I haven't tested it but that should be something to start, and probably you will need to adapt the icon look with CSS