How to Vertically Align Text with Font Awesome Icons in Bootstrap Buttons?

Vertical Alignment of Text with Font Awesome Icons

When combining Font Awesome icons and text in Bootstrap buttons, aligning the text vertically can be challenging. Typically, the text aligns with the bottom edge of the icon.

To achieve vertical text alignment, modify the vertical alignment of the Font Awesome icon instead of the text.

<div>
  <span class="icon icon-2x icon-camera"><p>Alternatively, you can separate the icon and text into individual spans and target them with CSS:</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;
}