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](https://i.stack.imgur.com/njE6v.png)](https://i.stack.imgur.com/njE6v.png)

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?