Comment centrer verticalement le texte avec des icônes Font Awesome dans les boutons Bootstrap ?

Centrage vertical du texte avec des icônes Font-Awesome

Parfois, lorsque vous travaillez avec des boutons Bootstrap qui intègrent à la fois des icônes et du texte Font Awesome, en alignant le le texte verticalement avec l'icône peut s'avérer difficile. Généralement, le texte s'alignera sur le bord inférieur de l'icône, comme illustré dans cet exemple JSFiddle.

Pour corriger ce désalignement, évitez de modifier l'alignement vertical du texte. Au lieu de cela, ajustez l'alignement vertical de l'icône Font Awesome.

Solution de style en ligne :

`

<i>

`

Classe CSS Solution :

`.icon {

vertical-align: middle;
font-size: 40px;

}

.my-text {

font-family: "Courier-new";

}

.mon-conteneur-fantaisie {

...

}`

Approche alternative :

Une alternative à l'utilisation de icon-2x consiste à spécifier manuellement la taille de la police de l'icône, comme démontré dans le code suivant extrait :

`

<span>

`

Cette approche offre une plus grande flexibilité dans le contrôle de la taille de l'icône. Voir le JSFiddle mis à jour pour un exemple fonctionnel.

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!