如何为我的以下代码在悬停时填充字体真棒评级图标？

Question

我想填充评级图标，即在悬停时将远图标更改为快速。如何实现？

可以通过CSS吗？还是需要 javascript？

我不知道这是否是最好的做法。但这是我的 html 和 CSS。如果这不是最佳实践，您可以按照自己的方式修改 css。

<div id="rating-review">
    <div class="rating-group">
        <input disabled checked class="rating__input rating__input--none" name="rating" value="0"  type="radio">

        <label aria-label="1 star" class="rating__label" for=""><i class="rating__icon rating__icon--star far fa-star"></i></label>
        <input class="rating__input" name="rating" value="1" type="radio">

        <label aria-label="2 stars" class="rating__label" for=""><i class="rating__icon rating__icon--star far fa-star"></i></label>
        <input class="rating__input" name="rating" value="2" type="radio">

        <label aria-label="3 stars" class="rating__label" for=""><i class="rating__icon rating__icon--star far fa-star"></i></label>
        <input class="rating__input" name="rating" value="3" type="radio">

        <label aria-label="4 stars" class="rating__label" for=""><i class="rating__icon rating__icon--star far fa-star"></i></label>
        <input class="rating__input" name="rating" value="4" type="radio">

        <label aria-label="5 stars" class="rating__label" for=""><i class="rating__icon rating__icon--star far fa-star"></i></label>
        <input class="rating__input" name="rating" value="5" type="radio">
    </div>
</div>

我的CSS：

#rating-review .rating-group {
display: inline-flex;
overflow: hidden;
}

#rating-review .rating__icon {
pointer-events: none;
}

#rating-review .rating__input {
position: absolute !important;
left: -9999px !important;

}

#rating-review .rating__input--none {
display: none;
}

#rating-review .rating__label {
cursor: pointer;
padding: 0 0.1em;
font-size: 1.15rem;
}

#rating-review .rating__icon--star {
color: #F48D21;
}

#rating-review .rating__input:checked\~.rating__label .rating__icon--star {
color: #ddd;
}

#rating-review .rating-group:hover .rating__label .rating__icon--star {
color: #F48D21;
}

#rating-review .rating__input:hover\~.rating__label .rating__icon--star {
color: #ddd;
}

如何实现？