web-dev-qa-db-fra.com

Fontawesome 5 unicode

L'icône 5 étoiles de Font-awesome a <i class="fas fa-star"></i> et <i class="far fa-star"></i> est différent de fas , far et Unicode pour les deux est f005 maintenant je veux l'utiliser comme mon système de notation où la première est une étoile régulière et devient par une étoile solide, mais comment définir ce fasfar dans mon 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;
}

avec mes codes ci-dessus, je ne reçois qu'une étoile solide

cssunicodefont-awesomefont-awesome-5
6
mafortis

La différence entre la version regular et la version solid est le font-weight. Vous devez simplement ajuster celle-ci pour permuter entre les deux versions:

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.5.0/css/all.css">

<input type="radio" class="star">
<label class="star"></label>

Voici une autre question connexe Font Awesome montre un carré au lieu d’icône quand il est utilisé directement en CSS pour plus de détails.

13
Temani Afif

Vous n'êtes pas sûr à 100% du type d'étoile que vous voulez quand vous êtes dans l'état inactif/par défaut, alors vous avez deviné qu'il vous fallait l'étoile creuse. Vous pouvez modifier radicalement l'apparence des icônes FA5 en modifiant le font-weight en et de 400 ou 900. J'ai placé des étoiles par les commentaires importants dans la démo. Les modifications restantes ne sont que des styles divers optionnels tels que text-shadows, transitions à 2 voies sur :hover, etc. Bien que facultatif, vous devriez essayer de masquer la case à cocher et d’utiliser simplement l’étiquette, c’est mieux de façon esthétique. 

Démo

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;
}
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<!------------{????} Follow this pattern so that the label acts as a
------------------ remote button to the hidden checkbox-->

<!--⭐} Set an #id on checkbox-->
<input id='lucky' class='star' type='checkbox'>

<!--⭐} Set a [for] attribute with the value of checkbox #id-->
<label for='lucky' class='star'></label>

1
zer00ne

Il convient également de noter qu’en plus de l’étoile f005, FontAwesome comporte unicode f006, qui est une étoile vide. Cela est vrai au moins dans la version que j'utilise.

0
jfunk