How to Vertically Center Text and Font-Awesome Icons in Bootstrap Buttons?

Vertical Text Alignment in Buttons with Font-Awesome Icons

When incorporating a large Font-Awesome icon into a bootstrap button alongside text, the text tends to align with the icon's bottom edge, creating a visually unbalanced appearance.

Solution

To vertically center the text, focus on aligning the icon rather than the text. Here's how to achieve it:

• Avoid altering the vertical-align of the text.
• Use CSS to set the vertical-align property of the Font-Awesome icon to "middle."

Example Code

<div>
  <span class="icon icon-2x icon-camera"><p><strong>Alternative Approach</strong></p>
<p>For more customization, consider avoiding the icon-2x class and specifying the font size manually. Here's an example:</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;
}

.my-text {
    font-family: "Courier-new";
}

.my-fancy-container {
    border: 1px solid #ccc;
    border-radius: 6px;
    display: inline-block;
    margin: 60px;
    padding: 10px;
}

Conclusion

By adjusting the vertical alignment of the Font-Awesome icon instead of the text, you can effectively center the text vertically in the button alongside the icon. This approach provides greater customization and flexibility in controlling the appearance of your button's content.