Comment utiliser les icônes Font Awesome comme contenu CSS ?

Utiliser les icônes Font Awesome comme contenu CSS

En utilisant les icônes Font Awesome comme contenu CSS, évitez d'intégrer du code HTML directement dans la propriété de contenu. Suivez plutôt ces étapes :

FontAwesome 5 :

1. Définissez la famille de polices comme "Font Awesome 5 Free" ou "Font Awesome 5 Brands" selon le type d'icône.
2. Utilisez le code d'échappement Unicode au lieu des entités HTML pour l'icône, par exemple : "f095" pour "fa-phone".
3. Assurez-vous que l'épaisseur de la police est définie sur 900.

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

FontAwesome 4 et versions antérieures :

1. Copiez la propriété content avec l'entité correspondante du style Font Awesome feuille.
2. Utilisez le contenu copié dans la propriété content avec la famille de polices correcte.

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

Pour l'espacement entre l'icône et le texte :

1. Définir l'affichage : bloc en ligne ; pour l'icône afin d'éviter le chevauchement.
2. Ajouter un padding-right : pour fournir un espace entre les deux.

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

Pour modifier l'icône en survol :

1. Créez un sélecteur distinct pour l'état :hover.
2. Modifiez la propriété content pour spécifier le nouveau code d'échappement Unicode pour le icône de survol.

a:hover:before {
    content: "\f099";
}

Envisagez de définir une largeur fixe sur la déclaration de l'icône de base pour éviter tout déplacement dû aux différentes tailles d'icône.

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!