web-dev-qa-db-fra.com

Police awesome 5 sur pseudo-éléments

Dans font awesome 4, vous pouvez facilement appliquer une icône à un élément: before /: after à l'aide de CSS.

La même chose est-elle possible avec la nouvelle police d'implémentation awesome 5 JS/SVG? D'après ce que je peux voir, cela nécessite que la balise appropriée existe en HTML, ce qui n'est pas toujours pratique, par exemple. vous avez un CMS et souhaitez appliquer une icône à tous les éléments de contenu créé par l'utilisateur <li>

Je sais que dans FA5, vous pouvez toujours utiliser les vieux CSS/webfonts mais ce serait bien si la même fonctionnalité était disponible dans la méthode recommandée d’utilisation de JS

font-awesomefont-awesome-5
43
Leigh

Vous devez 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: Font Awesome 5 + Solid ou Regular ou Light ou Brands

44
fiasko

Spécifier le bon font-weight semble être la clé pour afficher correctement certains symboles (et non "□□□" à la place).

font-weight doit être:

  • 400 pour les symboles Regular et Brands
  • 900 pour Solid symboles
  • 300 pour Light symboles

C'est à dire. si vous utilisez Font-Awesome avec CSS + Webfonts, une solution réservée aux CSS 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;
    /* ... */
}
_
121
benjaminplanche

Je pense que ça fonctionne bien comme ça:

.class:before{
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}
16
Mohammed

Je dois travailler avec 5

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

dans <head> et

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

dans mes css

6
Ward

Utilisez 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;
}
1
Coyote Red

Si vous utilisez Fort Awesome pour servir vos icônes, vous devez ajouter font-family: <my-kit-name>, inutile d'utiliser font-weight: 400/900.

Pour plus d'informations, voir ce lien:

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

1
Chrillewoodz

Mon problème disparaît lorsque je définis cette valeur: font-weight: 900;

1
Mantas Dainys