title: Font Awesome 5 unicode
body: <p>Font Awesome 5 star icon has <code>&lt;i class="fas fa-star"&gt;&lt;/i&gt;</code> and <code>&lt;i class="far fa-star"&gt;&lt;/i&gt;</code> different is <code>fas , far</code> and Unicode for both is <code>f005</code> 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 <code>fas</code> <code>far</code> in my css?</p>
  
  <h1>Code</h1>
  
  <pre><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;
  }
  </code></pre>
  
  <p>with my codes above i only get solid star</p>