Font Awesome 5 unicode

Question

Font Awesome 5 star icon has and different is fas , far

Answer 1

Not 100% sure what type of star you wanted when in inactive/default state, so guessed that you needed the hollow star. You can change the appearance of FA5 icons dramatically by changing the font-weight to and from 400 or 900. I placed stars by the important comments in the demo. The remaining changes are just optional miscellaneous styles like text-shadows, 2 way transitions on :hover, etc. Although optional, you should try hiding the actual checkbox and just use the label, it's better aesthetically IMO.

Demo

input.star {
  /*⭐} By using the label as the interface (button) this can be hidden*/
  display: none;
}

.star {
  color: rgba(255, 255, 255, 0);
  text-shadow: .25px -.25px 1px #000;
  transition: .2s ease;
}

.star:hover {
  cursor: pointer;
  transition: .3s ease;
  text-shadow: -5px -6px 4px rgba(255, 142, 86, 0.6);
}

input.star:checked~label.star:hover {
  transition: .3s ease;
  text-shadow: -5px -6px 4px rgba(255, 142, 86, 0.6);
}

label.star::before {
  content: "\f005";
  /*⭐} Optional but recommended */
  color: #e74c3c;
  transition: all .25s;
  font-family: 'Font Awesome 5 Free';
  /*⭐} By lowering the font-weight, the icon is an outline */
  font-weight: 400;
  font-size: 32px;
}

input.star:checked~label.star::before {
  content: '\f005';
  color: #e74c3c;
  transition: all .25s;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}

     
 

        
热议问题