How to fill the font awesome rating icon on hover for my following code?

Question

I want to fill the rating icon i.e change far icon to fas on hover. How to achieve it?

Is it possible through CSS? or javascript is needed?

I dont know whether this is the best pratice. But this is my html and CSS. You can modify the css in your own way if this is not best practice.

<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>

My 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;
}

How to acheive it?