Font Awesome 5 star icon has <i class="fas fa-star"></i>
and <i class="far fa-star"></i>
different is fas , far
and Unicode for both is f005
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 this fas
far
in my css?
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
To use the Free Font Awesome 5 icons, you can choose to download the Font Awesome library, or you can sign up for an account at Font Awesome, and get a code (called KIT CODE) to use when you add Font Awesome to your web page.
Reference Individual Icons Set the font-family to the right family for the icons you want to use (see family table below). Set the font-weight to the right weight for the style you want to use (see style table). Set the content to the Unicode value of one of our icons.
Font Awesome 5 breaks backwards compatibility with Font Awesome 4 by changing both the prefixes and the names of certain icon classes. UberMenu 3.4 updates to Font Awesome 5. Therefore customers who have previously set Font Awesome 4 icons will have saved classes that are no longer Font Awesome 5-compatible.
Inserting Unicode characters To insert a Unicode character, type the character code, press ALT, and then press X. For example, to type a dollar symbol ($), type 0024, press ALT, and then press X.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With