Font Awesome 5 unicode
Solution 1
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.
Solution 2
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 transition
s 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>
mafortis
My reputation number might be high (at some point) but it doesn't mean I know everything or I am expert in all programming languages, so I might ask basic questions that you might find silly (due to your experience). So before giving downvote keep that in mind and try to be intelligence in life not just coding.
Updated on July 28, 2022Comments
-
mafortis almost 2 years
Font Awesome 5 star icon has
<i class="fas fa-star"></i>
and<i class="far fa-star"></i>
different isfas , far
and Unicode for both isf005
now i want to use it as my rating system where first is regular star and by click become solid star, but how do I define thisfas
far
in my css?Code
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: 900; }
with my codes above i only get solid star