Police impressionnant de 5 sur les pseudo-éléments

De font awesome 4 vous pouvez facilement appliquer une icône à un :avant:après l'élément à l'aide de CSS.

Est même possible avec la nouvelle police impressionnant 5 JS/SVG mise en œuvre? Que de ce que je peux voir cela nécessite pertinentes de la balise existe pas en html, ce qui n'est pas toujours pratique, par exemple, vous avez un CMS et souhaitez appliquer une icône de tout contenu créé par l'utilisateur <li> éléments

Je sais que dans FA5 vous pouvez toujours utiliser l'ancien css/webfonts, mais ce serait bien si la même fonctionnalité était disponible dans la méthode recommandée pour l'utilisation de JS

InformationsquelleAutor Leigh | 2017-12-08

font-awesome font-awesome-5

44

Vous avez besoin pour l'activer (il est désactivé par défaut).
```
<script>
  window.FontAwesomeConfig = {
    searchPseudoElements: true
  }
</script>
```
Css:
```
.class:before{
  display: none;
  content: "\f16c";
  font-family: "Font Awesome 5 Brands";
}
```
Autres types:
Police Impressionnant 5 + Solide ou Régulière ou de la Lumière ou des Marques
- Cheers, j'ai vu que searchPseudoElements dans l'API, mais il n'a pas donner un exemple de la police de la famille/du contenu sur le site
- Je crois que c'est uniquement si vous utilisez la JS+version SVG de FA. Si vous êtes juste en utilisant le CSS, puis @Mohammed réponse est ce que vous avez besoin.
- c'est correct!
- Soyez prudent avec cela, il peut absolument anéantir les performances lors de l'utilisation de l'Edge / IE - voir github.com/FortAwesome/Font-Awesome/issues/12994
InformationsquelleAutor fiasko
119

Spécifiant les font-weight semble la clé pour avoir quelques-uns des symboles affichés correctement (et non pas "

" à la place).

font-weight doit être:
- 400 pour Regular et Brands symboles
- 900 pour Solid symboles
- 300 pour Light symboles
I. e. si vous utilisez font-Awesome avec CSS + Webfonts, une CSS, la seule solution est la suivante:
```
@import url("font-awesome/css/fontawesome-all.min.css"); /* FA CSS import */

/* ... */

.class:before {
    /* >> Symbol you want to use: */
    content: "\f16c";
    /* >> Name of the FA free font (mandatory), e.g.:
               - 'Font Awesome 5 Free' for Regular and Solid symbols;
               - 'Font Awesome 5 Pro' for Regular and Solid symbols (Professional License);
               - 'Font Awesome 5 Brand' for Brands symbols. */
    font-family: 'Font Awesome 5 Free';
    /* >> Weight of the font (mandatory):
               - 400 for Regular and Brands symbols;
               - 900 for Solid symbols;
               - 300 for Light symbols. */
    font-weight: 900;

    /* >> Optional styling: */
    display: inline-block;
    /* ... */
}
```
- wow, qui doit avoir été une partie de la documentation officielle... vous avez sauvé ma journée, merci
- C'était vraiment utile, merci man
- peut confirmer - l'épaisseur de la police ont fait pour moi, trop. thx
- Même ici. Si vous mettez à jour depuis une ancienne version de FA, **la nécessité de définir la police de poids dans toutes les classes contenant "contenu"
- Pourquoi n'est-ce pas le plus important dans la documentation officielle? J'ai perdu une journée entière à essayer de comprendre cela! 😐
- ne la trouverez nulle part ailleurs - il fonctionne grâce.
- m'a sauvé la vie de la grâce. font-weight: 900 a fait l'affaire pour moi!
- Il est descendu à font-weight, juste font-weight 😐 wow.
- Ce n' font-weight faire? Je suis seulement en utilisant le solide icônes et font-weight ne semble avoir aucun effet. Je peux l'omettre, ou de définir sa valeur à 400 et 900, j'ai toujours l'icône s'affiche comme prévu.
- Cela a été très utile. Merci.
- Pourquoi toutes les documentations doit être un morceau de poubelle et de ne pas inclure ces infos importantes?!!
- fontawesome.com/how-to-use/on-the-web/advanced/... il est indiqué. Mais la plupart, je pense, va voir la police de poids spécifiée et l'ignorer en pensant qu'il n'est pas important (aka, je l'ai fait).
- voici un cookie @Aldream
- grâce à sa été très utiles réponse
InformationsquelleAutor benjaminplanche
16

Je pense que sa fonctionne bien comme cela:
```
.class:before{
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}
```
- font-weight: 900; est seulement nécessaire pour "solide", les icônes, il pense.
InformationsquelleAutor Mohammed

J'ai obtenu 5 fonctionne à l'aide de

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" >

dans <head> et

:before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
  content: "\f167";
}

dans mon css

InformationsquelleAutor Ward

1

Devriez-vous être l'aide d' Fort Impressionnant pour servir vos icônes ensuite, vous devez ajouter font-family: <my-kit-name>, pas besoin d'utiliser font-weight: 400/900.

Pour plus d'informations, voir ce lien:

https://articles.fortawesome.com/how-to-using-fort-awesome-icons-f50ab11a2d2a

InformationsquelleAutor Chrillewoodz

Utiliser ce Lien ->: https://use.fontawesome.com/releases/v5.5.0/css/all.css

CSS

ul li{
    list-style-type: none;
    position: relative;
}

ul li:before{
  position: absolute;
  color:#ff0000;
  top:0;
  left:-30px;
  font-family: 'Font Awesome 5 Free';
  font-size:1.2em;
  content: "\f105";
  font-weight: 900; /* <-- add this or 400 for other styles */
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

InformationsquelleAutor Coyote Red

1

Mon problème disparaît lorsque j'ai mis cette valeur: font-weight: 900;

InformationsquelleAutor Mantas Dainys

Vous devez vous connecter pour publier un commentaire.

" à la place).