web-dev-qa-db-fra.com

Le contenu css de FontAwesome ne s'affiche pas

J'essaie d'utiliser FontAwesome dans le contenu de CSS.

Il apparaît avec le code de l'icône au lieu de l'icône. J'ai suivi les aides en ligne mais ne fonctionne toujours pas

css
  @font-face {
  font-family: 'FontAwesome';
  src: url('https://use.fontawesome.com/releases/v5.0.6/css/all.css'); 
}


.fp-prev:before {
    color:#fff;
    content: '/f35a';
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}
csscss3font-awesomefont-awesome-5
2
happycoding

Tout d'abord, il vous suffit d'inclure le fichier CSS de Font Awesome 5 soit dans la balise head à l'aide de:

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

Ou dans le fichier CSS:

@import url("https://use.fontawesome.com/releases/v5.5.0/css/all.css")

Ensuite, vous devez corriger le font-family et le content comme ceci:

@import url("https://use.fontawesome.com/releases/v5.5.0/css/all.css");

.fp-prev:before {
    color:#000;
    content: '\f35a'; /* You should use \ and not /*/
    font-family: "Font Awesome 5 Free"; /* This is the correct font-family*/
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}
<i class="fp-prev"></i>

En guise de remarque: Font Awesome 5 fournit 3 font-family différents pour chaque pack d’icônes:

Font Awesome 5 Free pour les icônes gratuites.

Font Awesome 5 Brands pour les icônes de marque comme Facebook, Twitter, etc.

@import url("https://use.fontawesome.com/releases/v5.5.0/css/all.css");

.fp-prev:before {
    color:#000;
    content: "\f099"; 
    font-family: "Font Awesome 5 Brands";
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}
<i class="fp-prev"></i>

Font Awesome 5 Pro pour la Font Awesome Pro

10
Temani Afif

Lorsque vous souhaitez inclure FontAwesome, l'URL fournie doit figurer dans la balise head sous la forme d'un fichier stylesheet: 

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

Vous pouvez ensuite utiliser Font Awesome comme vous l’avez fait. 

0
Gobbin