I’m using FontAwesome to display some stars and colour them
How can I colour 4 and a half stars out of 5 using CSS only? Currently I’m only able to colour them all.
My current CSS and HTML code is below.
.checked {
color: orange;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<span class="fa fa-star fa-3x checked"></span>
<span class="fa fa-star fa-3x checked"></span>
<span class="fa fa-star fa-3x checked"></span>
<span class="fa fa-star fa-3x checked"></span>
<span class="fa fa-star fa-3x checked"></span>>Solution :
You cannot modify that without modifying the html.
Just replace the needed icon with
<i class="fa-solid fa-star-half"></i>