关于 javascript:如何在 jquery 评分星级中使用字体 Awesome 而不是图像

 2022-01-07 

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

我使用 jquery.raty.min.js 来显示星级,在 js 方法中,我可以选择更改显示开始图像,如

1
2
3
starOff:"/images/star_none.png",

starOn:"/images/star_full.png"

但在这里我想使用像

这样的字体 Awesome 类

1
2
<i class="fa fa-star-o">
<i class="fa fa-star">

我试过像下面这样放置类

1
2
3
starOff:"<i class='fa fa-star-o'>",

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

但它不起作用任何人都可以帮助这样做。


对这个问题的简短回答是使用 Raty (2.7.0) 的最新更新(截至本回复的最后一次编辑)并查看"starType"属性。当您设置元素时,您将执行以下操作:

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

这里有更多细节... 如果您查看 CSS 文件和字体文件,您将看到它们如何设置 标签以使用特定字体。从那里它是一个简单的任务来确定每个类的 :before 内容将是什么。首先确保包含 FontAwesome,然后像这样配置你的 CSS(特定于 FontAwesome):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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 内容值的完整列表

最终产品看起来像这样:

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

当这样配置时:

1
2
3
4
5
6
7
8
9
10
11
$(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 个月了,但我希望这对某人有所帮助!


我认为不修改插件本身的简单方法是不存在的。如果您查看 jquery.raty.js 文件,请搜索:

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

那就是创建图像元素,

您需要做的是创建图标。我认为将其更改为以下内容:

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

但用法是:

1
2
3
starOff:"fa fa-star-o",

starOn:"fa fa-star"

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


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

html:

1
 

css:

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

js:

1
2
3
4
5
6
7
8
$('.score-star').each(function () {
    $(this).raty({
        number: 5,
        starType: 'i',
        starOff: 'fa fa-star-o',
        starOn: 'fa fa-star'
    });
});

raty:

1
2
<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">

真棒:

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

希望对您有所帮助。


使用 font awesome 5,代码应如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.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;
}

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