Question

我正在使用 jquery.raty.min.js 以显示星级评分，在js方法中我可以选择更改显示开始图像

starOff:"/images/star_none.png",

starOn:"/images/star_full.png"

但在这里我想使用像

这样的字体真棒类

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

我尝试过放置下面的课程

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

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

但是没有用，任何人都可以帮忙这样做。

Answer 1

此问题的简短回答是使用Raty (2.7.0)的最新更新（截至此响应的最后一次编辑）并查看“starType”属性。当您设置元素时，您将执行以下操作：

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

以下是更多细节...... 如果您查看CSS文件和fonts文件，您会看到他们如何设置<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内容值的完整列表here

最终产品看起来像这样：

<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个月了，但我希望这可以帮助别人！

Answer 2

我不认为有一个简单的方法，如果不修改插件本身。如果查看jquery.raty.js文件，请搜索：

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

那就是创建图像元素，

您需要做的是创建图标。我认为将其改为像以下一样：

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

但用法是：

starOff:"fa fa-star-o",

starOn:"fa fa-star"

我还没有测试过，但这应该是开始的，可能你需要用CSS调整图标外观

Answer 3

请检查字体大小和颜色..添加属性字体大小和颜色。

Answer 4

也许我无法理解现有的答案，但我发现在raty 2.7.1中使用fontawesome图标并不难。这是我的代码。

HTML：

<div class="score-star" id="star-appearance" rel="score-appearance">
</div>

的CSS：

.score-star {
    color: #07b062;
    font-size: 1.5em;
}

JS：

$('.score-star').each(function () {
    $(this).raty({
        number: 5,
        starType: 'i',
        starOff: 'fa fa-star-o',
        starOn: 'fa fa-star'
    });
});

RATY：

<link href="//cdn.bootcss.com/raty/2.7.1/jquery.raty.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/raty/2.7.1/jquery.raty.min.js"></script>

fontawesome：

<link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">

希望它有所帮助。

Answer 5

使用令人敬畏的5号字体，代码应类似于：

.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: 'Font Awesome 5 Free';

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

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

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

.star-half-png:before {
  content: "\f5c0";
  font-weight: 900;
}

如何使用字体Awesome而不是jquery评级星中的图像

5 个答案: