Wie richtet man Text vertikal mit Font Awesome-Symbolen in Bootstrap-Schaltflächen aus?

Vertikale Ausrichtung von Text mit Font Awesome-Symbolen

Beim Kombinieren von Font Awesome-Symbolen und Text in Bootstrap-Schaltflächen kann die vertikale Ausrichtung des Textes eine Herausforderung sein . Normalerweise wird der Text am unteren Rand des Symbols ausgerichtet.

Um eine vertikale Textausrichtung zu erreichen, ändern Sie die vertikale Ausrichtung des Font Awesome-Symbols anstelle des Textes.

<div>
  <span class="icon icon-2x icon-camera"><p>Alternativ: Sie können das Symbol und den Text in einzelne Bereiche aufteilen und sie mit CSS gezielt ansprechen:</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;
}