Font-Awesome 5 has svg support, but it changes my radiobutton into a svg element, and therefore I don't know how to get the onchange event. In the DOM if you inspect the radio buttons it looks like <svg ... > not <input ... >
HTML
<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
<input id="radio1" type="radio" name="radio" class='fas fa-star fa-2x' >
<input id="radio2" type="radio" name="radio" class='fas fa-star fa-2x' >
<input id="radio3" type="radio" name="radio" class='fas fa-star fa-2x' >
<input id="radio4" type="radio" name="radio" class='fas fa-star fa-2x' >
CSS
.svg-inline--fa
{
color : red;
}
.svg-inline--fa:hover
{
color : blue;
}
.svg-inline--fa:checked
{
color : yellow; /* does not work */
}
I suggest you use separate elements for the icon and the radio input.
<label class="radio" for="rating1">
<i class='fas fa-star'></i>
<input type="radio" value=1 name="rating" id='rating1' style='display: none;'>
</label>
The input may be visually hidden, but clicking the label which contains the icon, is like click the input