[英]How to replace fontawesome icons
我正在研究的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);
}
});
我尝试用Unicode字符替换(如代码中所示)的字体超赞图标,但这也不起作用。 我是jQuery的新手,所以将不胜感激。
我希望随着用户将鼠标悬停在上面时会看到五星级的轮廓。 用户单击星标后,应填满该点之前的所有星标并提交评分。
现在什么都没有出现在星星应该出现的地方。
这就是我使用CSS伪元素的方法。
在mouseover
函数中,我们将.star-over
类添加到该元素的图标以及所有.prevAll()
兄弟姐妹的图标中。 然后在mouseleave
函数中删除这些类。
点击后,如果元素不具备.rate-active
的类,我们将添加.rate-active
给它,并添加.far
(固体星)这个元素和前一个元素的图标。 我们还会从以前的任何同级中删除.rate-active
。
这是我的代笔的链接: https ://codepen.io/Souleste/pen/QXmgrV
$(document).on({ mouseover: function(event) { var star = $(this).find('.star'); $(this).find('.far').addClass('star-over'); $(this).prevAll().find('.far').addClass('star-over'); }, mouseleave: function(event) { var star = $(this).find('.star'); $(this).find('.far').removeClass('star-over'); $(this).prevAll().find('.far').removeClass('star-over'); } }, '.rate'); $(document).on('click', '.rate', function() { var star = $(this).find('.star'); if (!$(this).hasClass('rate-active')) { $(this).siblings().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 { width: fit-content; margin: 0 auto; cursor: pointer; display: flex; } .star { color: #91a6ff !important; } .rate { height: 50px; margin-left: -5px; padding: 5px; font-size: 25px; position: relative; cursor: pointer; } .rate input[type="radio"] { opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, 0%); pointer-events: none; } .star-over::after { font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 16px; content: "\\f005"; display: inline-block; color: #d3dcff; z-index: 1; position: absolute; top: 10px; left: 10px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css"> <div class="stars"> <label class="rate"> <input type="radio" name="radio1" id="star1" value="star1"> <div class="face"></div> <i class="far fa-star star one-star"></i> </label> <label class="rate"> <input type="radio" name="radio1" id="star2" value="star2"> <div class="face"></div> <i class="far fa-star star two-star"></i> </label> <label class="rate"> <input type="radio" name="radio1" id="star3" value="star3"> <div class="face"></div> <i class="far fa-star star three-star"></i> </label> <label class="rate"> <input type="radio" name="radio1" id="star4" value="star4"> <div class="face"></div> <i class="far fa-star star four-star"></i> </label> <label class="rate"> <input type="radio" name="radio1" id="star5" value="star5"> <div class="face"></div> <i class="far fa-star star five-star"></i> </label> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.