CODEWITHSUNDEEP
htmlcsstwitter-bootstrapfont-awesome
Dan Gravell
Dan Gravell

Reputation: 8240

Height of standalone font-awesome icon in Bootstrap button

I've varying heights on Bootstrap buttons, where the button contains only a Font Awesome icon.

Here's what it looks like in my app:

Font Awesome icon buttons with different heights

The button group on the left is 34px high, the one on the right is 28px high.

However I don't see the same issue when using Bootply or such, e.g.: http://www.bootply.com/BKDSnIXVQH . Here the icons are the same height.

So I must be doing something wrong, but I cannot diagnose it!

In the Chrome element inspector, there's a spacing at the top and bottom of the left-hand button text, but no such spacing around the fa icons on the right. The padding- styles are the same for both buttons so I don't know where that spacing is coming from. line-height and font-size are all the same.

If I add some text to the fa buttons they return to the correct height.

Given I haven't provided enough for a reproducible example, I don't expect anyone to answer this, but how can I at least diagnose what the problem is?

Upvotes: 1

Views: 2677

Answers (2)

iyyappan
iyyappan

Reputation: 777

Please verify and change the font-size in the fa button.

Upvotes: 0

AlexG
AlexG

Reputation: 5919

Because the .fa class has a line-height: 1; instead of using bootstraps 1.41.... for specific cases you can make use of something like this

.force-parent-lh {
  line-height: inherit !important;
}

Upvotes: 5

Related Questions