Javascript 如何替换图标

我需要一个五星级的PHP网页评级系统，我的工作。我最初尝试使用MooTools，但页面使用jQuery，它们会发生冲突，因此我尝试使用jQuery评级系统，但图标不会出现

我按照网站上的说明做了。网站上说我可以用我自己的图标来代替很棒的字体图标，但我不知道怎么做

以下是JS文件：

(function($) {

$.fn.stars = function(options) {

    var settings = $.extend({
        stars: 5,
        emptyIcon: '☆',
        filledIcon: '★',
        color: '#E4AD22',
        starClass: '',
        value: 0,
        text: null,
        click: function() {}
    }, options);
.
.
}

这是星星应该出现的页面：

echo '<div id="stars" class="click-callback" style="height:34px;width:300px;border:1px solid red;margin: 5px auto;"></div>';
$('#stars').stars({
    click: function(i) {
       alert(i);
    }
});

echo'；
$（“#星”）。星({
点击：功能（一）{
警报（一）；
}
});

我试着用Unicode字符替换（正如你在代码中看到的）字体可怕的图标，但这也不起作用。我是jQuery的新手，所以任何帮助都将不胜感激

我希望在用户将鼠标移到五星轮廓上时，能看到五星轮廓。一旦用户点击了一个星，所有的星到该点应该填写和评级提交

---

现在星星应该在哪里都没有出现。

我就是这样做的，使用css伪元素

在

mouseover

函数中，我们将类

.star over

添加到该元素的图标和所有

.prevAll（）

同级图标中。然后在

mouseleave

函数中删除这些类

单击时，如果该元素没有

.rate active

类，我们将向其添加

.rate active

，并将

.far

（实心星）添加到此元素和上一个元素的图标。我们还从以前的兄弟姐妹中删除

.rate active

以下是指向我的代码笔的链接：

$（文档）。在({
鼠标悬停：函数（事件）{
var star=$（this.find（'.star'）；
$（this.find（'.far'）.addClass（'star-over'）；
$（this.prevAll（）.find（'.far'）.addClass（'star-over'）；
},
mouseleave：函数（事件）{
var star=$（this.find（'.star'）；
$（this.find（'.far'）.removeClass（'star-over'）；
$（this.prevAll（）.find（'.far'）.removeClass（'star-over'）；
}
}","税率";；
$（文档）.on（'click'，'.rate'，函数（）{
var star=$（this.find（'.star'）；
if（！$（this）.hasClass（'rate-active'））{
$（this）.sides（）.find（'.star'）.addClass（'far'）.removeClass（'fas-rate-active'）.css（'color'，'#91a6ff'）；
star.addClass（'rate-active fas'）。removeClass（'far-star over'）；
$（this）.prevAll（）.find（'.star'）.addClass（'fas'）.removeClass（'far star over'）.css（'color'，'#91a6ff'）；
}
});
.stars{
宽度：适合的内容；
保证金：0自动；
光标：指针；
显示器：flex；
}
.明星{
颜色：#91a6ff！重要；
}
.费率{
高度：50px；
左边距：-5px；
填充物：5px；
字体大小：25px；
位置：相对位置；
光标：指针；
}
.费率输入[type=“radio”]{
不透明度：0；
位置：绝对位置；
最高：50%；
左：50%；
转换：转换（-50%，0%）；
指针事件：无；
}
在…之后{
字体系列：“字体真棒5免费”；
字号：900；
字体大小：16px；
内容：“\f005”；
显示：内联块；
颜色：#d3dcff；
z指数：1；
位置：绝对位置；
顶部：10px；
左：10px；
}
我就是这样做的，使用css伪元素

在
mouseover
函数中，我们将类
.star over
添加到该元素的图标和所有
.prevAll（）
同级图标中。然后在
mouseleave
函数中删除这些类

单击时，如果该元素没有
.rate active
类，我们将向其添加
.rate active
，并将
.far
（实心星）添加到此元素和上一个元素的图标。我们还从以前的兄弟姐妹中删除
.rate active

以下是指向我的代码笔的链接：


$（文档）。在({
鼠标悬停：函数（事件）{
var star=$（this.find（'.star'）；
$（this.find（'.far'）.addClass（'star-over'）；
$（this.prevAll（）.find（'.far'）.addClass（'star-over'）；
},
mouseleave：函数（事件）{
var star=$（this.find（'.star'）；
$（this.find（'.far'）.removeClass（'star-over'）；
$（this.prevAll（）.find（'.far'）.removeClass（'star-over'）；
}
}","税率";；
$（文档）.on（'click'，'.rate'，函数（）{
var star=$（this.find（'.star'）；
if（！$（this）.hasClass（'rate-active'））{
$（this）.sides（）.find（'.star'）.addClass（'far'）.removeClass（'fas-rate-active'）.css（'color'，'#91a6ff'）；
star.addClass（'rate-active fas'）。removeClass（'far-star over'）；
$（this）.prevAll（）.find（'.star'）.addClass（'fas'）.removeClass（'far star over'）.css（'color'，'#91a6ff'）；
}
});
.stars{
宽度：适合的内容；
保证金：0自动；
光标：指针；
显示器：flex；
}
.明星{
颜色：#91a6ff！重要；
}
.费率{
高度：50px；
左边距：-5px；
填充物：5px；
字体大小：25px；
位置：相对位置；
光标：指针；
}
.费率输入[type=“radio”]{
不透明度：0；
位置：绝对位置；
最高：50%；
左：50%；
转换：转换（-50%，0%）；
指针事件：无；
}
在…之后{
字体系列：“字体真棒5免费”；
字号：900；
字体大小：16px；
内容：“\f005”；
显示：内联块；
颜色：#d3dcff；
z指数：1；
位置：绝对位置；
顶部：10px；
左：10px；
}

我假设emptyIcon:和filledIcon:在使用字体awesome图标时，指的是字体awesome.css文件中的名称。。。因此，要使用自己的图标，可以添加自己的custom.css，在其中添加图标的逻辑，然后从emptyIcon和filledIcon引用它们。我假设emptyIcon:和filledIcon:在使用字体awesome图标时，引用字体awesome.css文件中的名称。。。因此，要使用自己的图标，可以添加自己的custom.css，在其中添加图标的逻辑，然后从emptyIcon和filledIcon引用它们