
Utilisation des icônes Font Awesome dans le contenu CSS
En essayant d'utiliser les icônes Font Awesome dans l'attribut de contenu CSS, vous avez peut-être rencontré difficultés dues à l'impossibilité d'intégrer du code HTML dans ce contexte.
Font Awesome 5 et Plus tard
Pour Font Awesome 5 et versions ultérieures, vous devez procéder comme suit :
- Définissez la famille de polices en vous assurant de spécifier soit "Font Awesome 5 Free" soit "Font Awesome 5 Brands" en fonction du type d'icône souhaité.
- Incluez la propriété content, mais utilisez la séquence d'échappement Unicode correspondante au lieu du HTML. entités.
- Définissez l'épaisseur de la police sur 900.
1 2 3 4 5 6 7 8 | a:before {
font-family: "Font Awesome 5 Free" ;
content: "\f095" ;
display: inline-block;
padding-right: 3px;
vertical-align: middle;
font-weight: 900;
}
|
Copier après la connexion
Font Awesome 4 et versions antérieures
Pour Font Awesome 4 et versions antérieures versions, suivez ces étapes :
- Localisez le style génial de la police feuille.
- Identifiez la classe de l'icône souhaitée (par exemple, fa-phone).
- Copiez la propriété de contenu associée à cette classe, qui contient le code d'entité.
- Utilisez ce code dans votre CSS, en l'attribuant à l'attribut content.
1 2 3 4 | a:before {
font-family: FontAwesome;
content: "\f095" ;
}
|
Copier après la connexion
Espacement Ajustements
Si vous avez besoin d'un espacement entre l'icône et le texte, affinez les paramètres suivants :
- Définissez la propriété d'affichage sur inline-block.
- Dans le sélecteur a:before, spécifiez un droit de remplissage approprié value.
1 2 3 4 5 6 7 | a:before {
font-family: FontAwesome;
content: "\f095" ;
display: inline-block;
padding-right: 3px;
vertical-align: middle;
}
|
Copier après la connexion
Effets de survol
Pour modifier l'icône en survol, ajoutez un sélecteur distinct pour :hover et spécifiez la séquence d'échappement Unicode mise à jour dans son attribut de contenu :
1 2 3 | a:hover:before {
content: "\f099" ;
}
|
Copier après la connexion
Largeur Ajustements
Pour éviter le mouvement des icônes dû aux variations de taille, pensez à définir une largeur fixe dans la déclaration de base :
1 2 3 4 | a:before {
width: 12px;
}
|
Copier après la connexion
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!