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

Question

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

这是我的应用程序中的样子：

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

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

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

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

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

鉴于我没有提供足够的可重复示例，我不希望任何人回答这个问题，但我如何至少诊断出问题所在？

Answer 1

因为 .fa 类有一个 line-height: 1; 而不是使用引导程序 1.41...。对于特定情况，您可以使用类似的东西

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

Answer 2

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