Font impressionnant 5 sur les pseudo-éléments

Question

Dans la police impressionnant 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

Answer 1

En spécifiant le bon 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;
    /* ... */
}

Answer 2

Vous devez l'activer (il est désactivé par défaut).

Css:

Autres types: Font Awesome 5 - Solide ou Régulière ou Léger ou Marques

Answer 3

Je pense que son travail bien juste comme ceci:

Answer 4

J'ai 5 à travailler en utilisant

dans `` et

dans mon css

Answer 5

Utilisez ce lien - à la suite d'un lien : https://use.fontawesome.com/releases/v5.5.0/css/all.css