Font Awesome 5 unicode

Question

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?

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

Answer 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.