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

Vertical Centering of Text with Font-Awesome Icons

Sometimes when working with Bootstrap buttons that incorporate both Font Awesome icons and text, aligning the text vertically with the icon can prove challenging. Typically, the text will align with the icon's bottom edge, as illustrated in this JSFiddle example.

To correct this misalignment, avoid modifying the vertical alignment of the text. Instead, adjust the vertical alignment of the Font Awesome icon.

In-line Styling Solution:

`

<i>

`

CSS Class Solution:

`.icon {

vertical-align: middle;
font-size: 40px;

}

.my-text {

font-family: "Courier-new";

}

.my-fancy-container {

...

}`

Alternative Approach:

An alternative to using icon-2x is to specify the icon's font size manually, as demonstrated in the following code snippet:

`

<span>

`

This approach provides greater flexibility in controlling the icon's size. See the updated JSFiddle for a working example.

The above is the detailed content of How to Vertically Center Text with Font Awesome Icons in Bootstrap Buttons?. For more information, please follow other related articles on the PHP Chinese website!