Utiliser l'icône Font Awesome comme contenu CSS

Je souhaite utiliser une icône Font Awesome comme contenu CSS, c'est-à-dire

a:before {
    content: "<i class='fa...'>...</i>";
}

Je sais que je ne peux pas utiliser de code HTML content, donc ne reste-t-il que des images?

Mise à jour pour FontAwesome 5 ^{Merci à Aurelien}

Vous devez changer le font-familyen Font Awesome 5 BrandsOU Font Awesome 5 Free, en fonction du type d'icône que vous essayez de rendre. N'oubliez pas non plus de déclarerfont-weight: 900;

a:before {
   font-family: "Font Awesome 5 Free";
   content: "\f095";
   display: inline-block;
   padding-right: 3px;
   vertical-align: middle;
   font-weight: 900;
}

Démo

Vous pouvez lire le reste de la réponse ci-dessous pour comprendre comment cela fonctionne et connaître certaines solutions de contournement pour l'espacement entre l'icône et le texte.

FontAwesome 4 et inférieur

C'est la mauvaise façon de l'utiliser. Ouvrez la feuille de style génial des polices, accédez à la classpolice que vous souhaitez utiliser, par exemple fa-phone, copiez la propriété de contenu sous cette classe avec l'entité et utilisez-la comme:

a:before {
    font-family: FontAwesome;
    content: "\f095";
}

Démo

Assurez-vous simplement que si vous cherchez à cibler une abalise spécifique , envisagez d'utiliser classplutôt un pour le rendre plus spécifique, comme:

a.class_name:before {
    font-family: FontAwesome;
    content: "\f095";
}

En utilisant la méthode ci-dessus, l'icône sera collée avec le texte restant, donc si vous voulez avoir un peu d'espace entre les deux, faites-en display: inline-block;et utilisez-en padding-right:

a:before {
    font-family: FontAwesome;
    content: "\f095";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
}

En étendant cette réponse plus loin, car beaucoup pourraient avoir besoin de changer une icône en survol, donc pour cela, nous pouvons écrire un sélecteur séparé et des règles d' :hoveraction:

a:hover:before {
    content: "\f099"; /* Code of the icon you want to change on hover */
}

Démo

Maintenant, dans l'exemple ci-dessus, les poussées d'icônes en raison de la taille différente et vous ne le voulez sûrement pas, vous pouvez donc définir un fixe widthsur la déclaration de base comme

a:before {
    /* Other properties here, look in the above code snippets */
    width: 12px; /* add some desired width here to prevent nudge */
}

Démo

Une autre solution sans que vous ayez à vous soucier manuellement des caractères Unicode se trouve dans Making Awesome Font Awesome - Utilisation d'icônes sans i-tags ( avertissement: j'ai écrit cet article ).

En un mot, vous pouvez créer une nouvelle classe comme celle-ci:

.icon::before {
    display: inline-block;
    margin-right: .5em;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}

Et puis utilisez-le avec n'importe quelle icône, par exemple:

<a class="icon fa-car" href="#">This is a link</a>

Si vous avez accès aux fichiers SCSS à partir de font-awesome, vous pouvez utiliser cette solution simple:

.a:after {
    // Import mixin from font-awesome/scss/mixins.scss
    @include fa-icon();

    // Use icon variable from font-awesome/scss/variables.scss
    content: $fa-var-exclamation-triangle;
}

a:before {
     content: "\f055";
     font-family: FontAwesome;
     left:0;
     position:absolute;
     top:0;
}

Exemple de lien: https://codepen.io/bungeedesign/pen/XqeLQg

Obtenez le code d'icône à partir de: https://fontawesome.com/cheatsheet?from=io

Vous pouvez utiliser unicode pour cela en CSS. Si vous utilisez la police génial 5, voici la syntaxe;

.login::before {
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content: "\f007";  
}

Vous pouvez voir leur documentation ici .

Vous devriez avoir un poids de police de 900 pour que la famille de polices Font Awesome 5 Free fonctionne.

Voici celui qui fonctionne:

.css-selector::before {
   font-family: 'Font Awesome 5 Free';
   content: "\f101";
   font-weight: 900;
}

Comme il est dit sur le site Web FontAwesome FontAwesome =>

HTML:

<span class="icon login"></span> Login</li>

CSS:

 .icon::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }

    .login::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f007";
   }

Dans .login::before-> modifier content:'';en fonction de votre unicode.

Mise à jour pour Font Awesome 5 à l'aide de SCSS

.icon {
  @extend %fa-icon;
  @extend .fas;

  &:before {
    content: fa-content($fa-var-user);
  }
}

Voici ma solution webpack 4 + font awesome 5:

plugin webpack:

new CopyWebpackPlugin([
    { from: 'node_modules/font-awesome/fonts', to: 'font-awesome' }
  ]),

style css global:

@font-face {
    font-family: 'FontAwesome';
    src: url('/font-awesome/fontawesome-webfont.eot');
    src: url('/font-awesome/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
    url('/font-awesome/fontawesome-webfont.woff2') format('woff2'),
    url('/font-awesome/fontawesome-webfont.woff') format('woff'),
    url('/font-awesome/fontawesome-webfont.ttf') format('truetype'),
    url('/font-awesome/fontawesome-webfont.svgfontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

i {
    font-family: "FontAwesome";
}