How to Use Font Awesome 5 Unicode for Regular and Solid Stars?

Font Awesome 5 Unicode for Regular and Solid Stars

Font Awesome 5 introduces the 'far' and 'fas' prefixes for regular and solid icons, respectively. While both prefix have the same Unicode ('f005'), they represent different font weights. Understanding this distinction is crucial when using them in CSS.

In your code snippet, you mentioned that you only get solid stars. This is because you have set the font-weight to 900 for both checked and unchecked star states. To achieve the desired behavior of having a regular star initially that becomes solid on click, you need to adjust the font-weight accordingly.

The updated CSS below handles this:

<code class="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: 200;
}</code>

In the above, the font-weight for the checked star state remains at 900, resulting in a solid star. However, for the unchecked state, the font-weight is set to 200, resulting in a regular star. This setup ensures that the star changes between regular and solid when clicked.

The above is the detailed content of How to Use Font Awesome 5 Unicode for Regular and Solid Stars?. For more information, please follow other related articles on the PHP Chinese website!