使一行 Font Awesome Icons 高度相同答案

【问题标题】：Make a row of Font Awesome Icons height identical使一行 Font Awesome Icons 高度相同
【发布时间】：2014-10-06 00:27:39
【问题描述】：

我正在建立一个网站，我想在视觉上让一排字体很棒的图标看起来有相同的高度。这也意味着我希望他们都坐在同一个基线上。

由于图标是具有不同纵横比的不同形状的性质，当您将具有相同字体大小或 fa-2x（等）的字体真棒图标放在同一行时，它们的高度和基线不会对齐水平。事实上，我注意到图标如何垂直并排排列似乎并没有太多默认值。有些人坐在基线以上随机高度。同样在相同的 fa-size 或 font-size 下，图标的大小在视觉上可能会显着不同。例如手机图标 vs 麦克风。

手机图标的奇怪之处在于它是如何漂浮在基线之上的，因为它似乎有一个我似乎无法找到覆盖的内置填充。使用 vertical-align:baseline 等没有帮助。

这是 HTML：

          <div class="some-class">
            <i class="fa fa-microphone"></i><i class="fa fa-mobile-phone"></i>
            <h3>TEXT</h3>
          </div>
          <div class="some-class">
            <i class="fa fa-automobile"></i><i class="fa fa-cubes"></i>
            <h3>DIFFERENT TEXT</h3>
          </div>

CSS：

.some-class {
    float: left;
    height: 160px;
    padding: 15px;
    text-align: center;
}

任何人都知道将我的字体真棒图标与 CSS 对齐的正确方法，这样它们在并排放置时在视觉上看起来是完全相同的高度？

【问题讨论】：

标签： icons height font-awesome

【解决方案1】：

某些字形大小和中心在设计上与大多数 (https://github.com/FortAwesome/Font-Awesome/issues/928) 不同，正如您自己发现的那样。可能值得向 FA 团队请求重新考虑。

我可以通过使用一些 css 调整来对齐布局中的图标，以专门补偿“fa-mobile-phone”。我在所有图标中添加了“fa-2x”，并在“fa-mobile-phone”中添加了以下 CSS：

font-size: 42px;
top: 4px;
position: relative;

之后，所有图标似乎都垂直对齐，并且似乎都具有相同的高度。您可能希望在布局中进行类似的调整。

【讨论】：