Wie richtet man Text vertikal mit großartigen Symbolen in großen Schriftarten in Bootstrap-Schaltflächen aus?

Vertikale Ausrichtung von Text mit großen Font Awesome-Symbolen

Die Arbeit mit Bootstrap-Schaltflächen, die Font Awesome-Symbole und -Text enthalten, kann eine Herausforderung sein um den Text vertikal zu zentrieren. Standardmäßig wird der Text am unteren Rand des Symbols ausgerichtet.

Um dieses Problem zu beheben, konzentrieren Sie sich auf die Anpassung der vertikalen Ausrichtung des Symbols und nicht auf den Text. So geht's:

1. Vertikale Ausrichtung mit Inline-Stilen:

   <div>
     <span class="icon icon-2x icon-camera"><li>
   <p><strong>Vertikale Ausrichtung mit CSS Klasse:</strong></p>
   <pre class="brush:php;toolbar:false"><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;
   }

2. Vermeiden Sie die Verwendung von Icon-2x:

   Das Anpassen der Symbolgröße mithilfe von icon-2x kann dazu führen bei Ausrichtungsfragen. Legen Sie stattdessen explizit die Schriftgröße des Symbols fest.

Durch die Anwendung dieser Techniken können Sie Text vertikal an großen Font Awesome-Symbolen ausrichten und so ein ästhetisch ansprechenderes und ausgewogeneres Erscheinungsbild gewährleisten.