Font Awesome 5 unicode
If you are using the JS+SVG version read this: Font Awesome 5 shows empty square when using the JS+SVG version
The difference between the regular and the solid version is the font-weight. You simply need to adjust this one to swap between both version:
input.star:checked ~ label.star:before {
content: '\f005';
color: #e74c3c;
transition: all .25s;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
label.star:before {
content: '\f005';
font-family: 'Font Awesome 5 Free';
font-weight: 200;
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<input type="checkbox" class="star">
<label class="star"></label>Here is another related question Font Awesome 5 on pseudo elements shows square instead of icon for more details.
Not 100% sure what type of star you wanted when in inactive/default state, so guessed that you needed the hollow star. You can change the appearance of FA5 icons dramatically by changing the font-weight to and from 400 or 900. I placed stars by the important comments in the demo. The remaining changes are just optional miscellaneous styles like text-shadows, 2 way transitions on :hover, etc. Although optional, you should try hiding the actual checkbox and just use the label, it's better aesthetically IMO.
Demo
input.star {
/*⭐} By using the label as the interface (button) this can be hidden*/
display: none;
}
.star {
color: rgba(255, 255, 255, 0);
text-shadow: .25px -.25px 1px #000;
transition: .2s ease;
}
.star:hover {
cursor: pointer;
transition: .3s ease;
text-shadow: -5px -6px 4px rgba(255, 142, 86, 0.6);
}
input.star:checked~label.star:hover {
transition: .3s ease;
text-shadow: -5px -6px 4px rgba(255, 142, 86, 0.6);
}
label.star::before {
content: "\f005";
/*⭐} Optional but recommended */
color: #e74c3c;
transition: all .25s;
font-family: 'Font Awesome 5 Free';
/*⭐} By lowering the font-weight, the icon is an outline */
font-weight: 400;
font-size: 32px;
}
input.star:checked~label.star::before {
content: '\f005';
color: #e74c3c;
transition: all .25s;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<!------------{ð} Follow this pattern so that the label acts as a
------------------ remote button to the hidden checkbox-->
<!--⭐} Set an #id on checkbox-->
<input id='lucky' class='star' type='checkbox'>
<!--⭐} Set a [for] attribute with the value of checkbox #id-->
<label for='lucky' class='star'></label>