如何用星形字体替换星形图像

Question

请帮助将评级中的星形图像替换为星形字体(内容：'\2605'(。

DataLife引擎(DLE(CMS评级。这不是我第一次尝试改变它，但它不起作用。几行代码。。。但我不知道如何以及在哪里正确放置：之前和内容：'\2605'

body {
background: #181818;
}
/*-- Start rating stars --*/
.unit-rating {
list-style: none;
margin: 0;
padding: 0;
width: 170px;
height: 17px;
position: relative;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAzCAMAAABG1xP1AAAA+VBMVEUAAAD/WgD0oln/WgDd3d3/qADd3d3d3d3/qAD/WgD/WgD/qADd3d3/qAD/WgDd3d3/qADd3d3/qAD/WgD/WgDd3d3/qAD/WgD/WgDd3d3d3d3/qADd3d3/WgDd3d3/qAD/WgDd3d3/qAD/WgDd3d3/qAD/WgD/qAD/WgDd3d3/WgD/qAD/WgDd3d3/qADd3d3/qADd3d3/qAD/WgDd3d3/qAD/WgDd3d3/WgD/WgD/qAD/qADd3d3/qAD/WgDd3d3/qAD/WgD/qAD/WgDd3d3/qAD/WgD/WgDd3d3d3d3/qAD/WgDd3d3/qAD/qAD/qADd3d3/qAD/WgDd6Xp2AAAAUHRSTlMAKAbMJyceEBAQ/NjQ0NDMzHNSHxjw8PDa18jIt7eoqKiioqKTk5NyclRURkZFHhYW7e3t5OTk29XGurScnJyBgYF1dWZmZk5LNjY2LS0hG09BiB0AAAEgSURBVCjPlc7nbsMgFAXgBrdxHG+n2Xvv7r33HsD7P0yv8M21jNQfORIS9xNw2Pg/Tzq8801NWrybhizn2qEBSCuLw3TQcDjm1A9Bvo54EmdXvVEl8M34nllDqJnUhPJGTUuUW5IQpiKsBkmXF0O29Pk+iXOlSqdV+jZtoGu9vOjwmc9o0pH9NBTyUjs0klJ2tnGYjZqexFSMCUjmRCbx1LlChcCw4nuWgXBuURPKKzUtUO5JHmEqw2qS9GV5whaGPCTxblTp7Iy+vdow6Fovzzp8iC1N2qKXhh0htENDkPYvDtHw0hUYOxiDfB+LJO6eesMmCHLxvVwdoQ4Q5wcloqY5yh3JA0wlWBckPVEas3kgDkjca1Ua2fTt1YZhl5Y/i/5OsBFlQPcAAAAASUVORK5CYII=") repeat-x;
display: inline-block;
}

.unit-rating li {
text-indent: -90000px;
padding: 0;
margin: 0;
float: left
}

.unit-rating li a {
display: block;
width: 17px;
height: 17px;
text-decoration: none;
text-indent: -9000px;
z-index: 17;
position: absolute;
padding: 0
}

.unit-rating li a:hover {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAzCAMAAABG1xP1AAAA+VBMVEUAAAD/WgD0oln/WgDd3d3/qADd3d3d3d3/qAD/WgD/WgD/qADd3d3/qAD/WgDd3d3/qADd3d3/qAD/WgD/WgDd3d3/qAD/WgD/WgDd3d3d3d3/qADd3d3/WgDd3d3/qAD/WgDd3d3/qAD/WgDd3d3/qAD/WgD/qAD/WgDd3d3/WgD/qAD/WgDd3d3/qADd3d3/qADd3d3/qAD/WgDd3d3/qAD/WgDd3d3/WgD/WgD/qAD/qADd3d3/qAD/WgDd3d3/qAD/WgD/qAD/WgDd3d3/qAD/WgD/WgDd3d3d3d3/qAD/WgDd3d3/qAD/qAD/qADd3d3/qAD/WgDd6Xp2AAAAUHRSTlMAKAbMJyceEBAQ/NjQ0NDMzHNSHxjw8PDa18jIt7eoqKiioqKTk5NyclRURkZFHhYW7e3t5OTk29XGurScnJyBgYF1dWZmZk5LNjY2LS0hG09BiB0AAAEgSURBVCjPlc7nbsMgFAXgBrdxHG+n2Xvv7r33HsD7P0yv8M21jNQfORIS9xNw2Pg/Tzq8801NWrybhizn2qEBSCuLw3TQcDjm1A9Bvo54EmdXvVEl8M34nllDqJnUhPJGTUuUW5IQpiKsBkmXF0O29Pk+iXOlSqdV+jZtoGu9vOjwmc9o0pH9NBTyUjs0klJ2tnGYjZqexFSMCUjmRCbx1LlChcCw4nuWgXBuURPKKzUtUO5JHmEqw2qS9GV5whaGPCTxblTp7Iy+vdow6Fovzzp8iC1N2qKXhh0htENDkPYvDtHw0hUYOxiDfB+LJO6eesMmCHLxvVwdoQ4Q5wcloqY5yh3JA0wlWBckPVEas3kgDkjca1Ua2fTt1YZhl5Y/i/5OsBFlQPcAAAAASUVORK5CYII=") 0 -17px;
z-index: 2;
left: 0
}

.unit-rating a.r1-unit {
left: 0
}

.unit-rating a.r1-unit:hover {
width: 17px
}

.unit-rating a.r2-unit {
left: 17px
}

.unit-rating a.r2-unit:hover {
width: 34px
}

.unit-rating a.r3-unit {
left: 34px
}

.unit-rating a.r3-unit:hover {
width: 51px
}

.unit-rating a.r4-unit {
left: 51px
}

.unit-rating a.r4-unit:hover {
width: 68px
}

.unit-rating a.r5-unit {
left: 68px
}

.unit-rating a.r5-unit:hover {
width: 85px
}

.unit-rating a.r6-unit {
left: 85px
}

.unit-rating a.r6-unit:hover {
width: 102px
}

.unit-rating a.r7-unit {
left: 102px
}

.unit-rating a.r7-unit:hover {
width: 119px
}

.unit-rating a.r8-unit {
left: 119px
}

.unit-rating a.r8-unit:hover {
width: 136px
}

.unit-rating a.r9-unit {
left: 136px
}

.unit-rating a.r9-unit:hover {
width: 153px
}

.unit-rating a.r10-unit {
left: 153px
}

.unit-rating a.r10-unit:hover {
width: 170px
}

.unit-rating li.current-rating {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAzCAMAAABG1xP1AAAA+VBMVEUAAAD/WgD0oln/WgDd3d3/qADd3d3d3d3/qAD/WgD/WgD/qADd3d3/qAD/WgDd3d3/qADd3d3/qAD/WgD/WgDd3d3/qAD/WgD/WgDd3d3d3d3/qADd3d3/WgDd3d3/qAD/WgDd3d3/qAD/WgDd3d3/qAD/WgD/qAD/WgDd3d3/WgD/qAD/WgDd3d3/qADd3d3/qADd3d3/qAD/WgDd3d3/qAD/WgDd3d3/WgD/WgD/qAD/qADd3d3/qAD/WgDd3d3/qAD/WgD/qAD/WgDd3d3/qAD/WgD/WgDd3d3d3d3/qAD/WgDd3d3/qAD/qAD/qADd3d3/qAD/WgDd6Xp2AAAAUHRSTlMAKAbMJyceEBAQ/NjQ0NDMzHNSHxjw8PDa18jIt7eoqKiioqKTk5NyclRURkZFHhYW7e3t5OTk29XGurScnJyBgYF1dWZmZk5LNjY2LS0hG09BiB0AAAEgSURBVCjPlc7nbsMgFAXgBrdxHG+n2Xvv7r33HsD7P0yv8M21jNQfORIS9xNw2Pg/Tzq8801NWrybhizn2qEBSCuLw3TQcDjm1A9Bvo54EmdXvVEl8M34nllDqJnUhPJGTUuUW5IQpiKsBkmXF0O29Pk+iXOlSqdV+jZtoGu9vOjwmc9o0pH9NBTyUjs0klJ2tnGYjZqexFSMCUjmRCbx1LlChcCw4nuWgXBuURPKKzUtUO5JHmEqw2qS9GV5whaGPCTxblTp7Iy+vdow6Fovzzp8iC1N2qKXhh0htENDkPYvDtHw0hUYOxiDfB+LJO6eesMmCHLxvVwdoQ4Q5wcloqY5yh3JA0wlWBckPVEas3kgDkjca1Ua2fTt1YZhl5Y/i/5OsBFlQPcAAAAASUVORK5CYII=") 0 -34px;
position: absolute;
height: 17px;
display: block;
text-indent: -9000px;
z-index: 1
}

<div id='ratig-layer-{$id}'>
<div class="rating">
<ul class="unit-rating">
<li class="current-rating" style="width:76.7%;">{$rating}</li>
<li><a data-link="rating/" title="1" class="r1-unit" onclick="doRate('1', '{$id}'); return false;">1</a></li>
<li><a data-link="rating/" title="2" class="r2-unit" onclick="doRate('2', '{$id}'); return false;">2</a></li>
<li><a data-link="rating/" title="3" class="r3-unit" onclick="doRate('3', '{$id}'); return false;">3</a></li>
<li><a data-link="rating/" title="4" class="r4-unit" onclick="doRate('4', '{$id}'); return false;">4</a></li>
<li><a data-link="rating/" title="5" class="r5-unit" onclick="doRate('5', '{$id}'); return false;">5</a></li>
<li><a data-link="rating/" title="6" class="r6-unit" onclick="doRate('6', '{$id}'); return false;">6</a></li>
<li><a data-link="rating/" title="7" class="r7-unit" onclick="doRate('7', '{$id}'); return false;">7</a></li>
<li><a data-link="rating/" title="8" class="r8-unit" onclick="doRate('8', '{$id}'); return false;">8</a></li>
<li><a data-link="rating/" title="9" class="r9-unit" onclick="doRate('9', '{$id}'); return false;">9</a></li>
<li><a data-link="rating/" title="10" class="r10-unit" onclick="doRate('10', '{$id}'); return false;">10</a></li>
</ul>
</div>
</div>

https://codepen.io/cool4ik/pen/mdxpbzV

更新时间：文章评级是活跃的和不断变化的。星星没有完全着色，数字以%为单位，变量的输出为style="宽度：｛$rating｝%"当前标记为：style＝"；宽度：76.7%&"；。

Answer 1

取自http://jsfiddle.net/mr_alien/zLrd0p5s/，略有改善。

说明：当悬停在容器上时，所有的恒星都会改变，除了在~之后的恒星。

#rating_bar {
padding: 0;
margin: 20px;
display: inline-block;
list-style: none;
}
li {
float: left;
}
#rating_bar>li:before {
content: '☆';
color: black;
cursor: pointer;
font-size: 3em;
float: left;
}
#rating_bar>li.active:before {
content: '★';
color: blue;
}
#rating_bar:hover>li:before {
content: '★';
color: blue;
}
#rating_bar>li:hover~li:before {
content: '☆';
color: black;
}

<ul id="rating_bar">
<li id="rate_1" class="active"></li>
<li id="rate_2" class="active"></li>
<li id="rate_3" class="active"></li>
<li id="rate_4"></li>
<li id="rate_5"></li>
</ul>