Bootstrap 按钮中独立字体图标的高度

Question

我在 Bootstrap 按钮上设置了不同的高度，其中按钮包含 仅 一个 Font Awesome 图标。

这是它在我的应用中的样子：

左边按钮组高34px，右边按钮组高28px

但是我在使用 Bootply 等时没有看到同样的问题，例如：http://www.bootply.com/BKDSnIXVQH。这里的图标高度相同。

所以我一定是做错了什么，但我无法诊断！

在 Chrome 元素检查器中，左侧按钮文本的顶部和底部有间距，但右侧 fa 图标周围没有间距。 padding- 两个按钮的样式相同，因此我不知道该间距来自何处。 line-height和font-size都是一样的

如果我向 fa 按钮添加一些文本，它们 return 会达到正确的高度。

鉴于我没有提供足够的可重现示例，我不希望任何人回答这个问题，但我怎样才能至少诊断出问题是什么？

Answer 1

因为 .fa class 有一个 line-height: 1; 而不是使用 bootstraps 1.41.... 对于特定情况你可以使用类似这样的东西

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

Answer 2

请验证并更改 fa 按钮中的字体大小。