How to Use Different Unicode Star Icons in Font Awesome 5?

Font Awesome 5 Unicode Star Rating System: Regular vs. Solid

In Font Awesome 5, the regular and solid star icons have distinct unicode values () but differ in their appearance based on their font weight.

CSS Code for Swapping Star Versions:

To switch between the regular and solid star versions using CSS, simply adjust the font weight:

<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; /* Solid star */
}

label.star:before {
  content: '\f005';
  font-family: 'Font Awesome 5 Free';
  font-weight: 200; /* Regular star */
}</code>

Implementation:

To use this star rating system:

1. Include the Font Awesome CSS file:

   <code class="html"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"></code>

2. Create a checkbox input with a star class:

   <code class="html"><input type="checkbox" class="star"></code>

3. Add a label with a star class next to the checkbox:

   <code class="html"><label class="star"></label></code>

By using the CSS code above, clicking on the checkbox will toggle between the regular star (font weight: 200) and the solid star (font weight: 900).

The above is the detailed content of How to Use Different Unicode Star Icons in Font Awesome 5?. For more information, please follow other related articles on the PHP Chinese website!