Comment aligner verticalement du texte avec des icônes Font Awesome dans les boutons Bootstrap ?

Alignement vertical du texte avec des icônes Font Awesome

Lors de la combinaison d'icônes Font Awesome et de texte dans des boutons Bootstrap, l'alignement vertical du texte peut être difficile . En règle générale, le texte s'aligne sur le bord inférieur de l'icône.

Pour obtenir un alignement vertical du texte, modifiez l'alignement vertical de l'icône Font Awesome au lieu du texte.

<div>
  <span class="icon icon-2x icon-camera">

Alternativement, vous pouvez séparer l'icône et le texte en étendues individuelles et les cibler avec CSS :

<div class='my-fancy-container'>
    <span class='my-icon icon-file-text'></span>
    <span class='my-text'>Hello World</span>
</div>

.my-icon {
    vertical-align: middle;
    font-size: 40px;
}

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!