如何使用Awesome字体代替jQuery Rating Star中的图像

这个问题的简短答案是使用Raty（2.7.0）的最新更新（截至对此响应的最后编辑），并查看'starType'属性。设置元素时，您将执行以下操作：

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

这里有更多详细信息...如果您查看CSS文件和字体文件，您将看到它们如何设置<i>标记以使用特定字体。从那里开始，一个简单的任务就是确定每个班级的:before内容。首先确保包括FontAwesome，然后像这样配置CSS（特定于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";
}

可在此处找到FontAwesome的CSS内容值的完整列表。

最终产品看起来像这样：

<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>

当像这样配置时：

$(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);
  }
});

我知道已经过去了3个月，但我希望这对某人有帮助！