如何替換fontawesome圖標

Question

我正在研究的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的新手，所以將不勝感激。

我希望隨着用戶將鼠標懸停在上面時會看到五星級的輪廓。 用戶單擊星標后，應填滿該點之前的所有星標並提交評分。

現在什么都沒有出現在星星應該出現的地方。

Answer 1

這就是我使用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>