使一行 Font Awesome 图标高度相同

Question

我正在建设一个网站，我想让一排 FontAwesome 图标在视觉上具有相同的高度。这也意味着我希望它们都坐在同一基线上。

由于图标的形状不同，长宽比也不同，当您在同一行上放置相同字体大小或 fa-2x（等等）的 FontAwesome 图标时，它们的高度和基线在水平方向上不对齐。实际上，我注意到，在一行中垂直地并排放置这些图标时，它们似乎没有默认的排列方式。其中一些会以随机高度位于基线之上。而且在相同的 fa-size 或 font-size 下，这些图标可能在视觉上显示出戏剧性的大小差异。例如，与麦克风图标相比，移动电话图标的奇怪之处在于它浮在基线之上，因为它似乎具有内置填充，我找不到覆盖它的方法。使用 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对Font Awesome图标进行对齐，使它们在放置在一起时在视觉上看起来高度相同吗？

- MikeP

Answer 1

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

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

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

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

- The Fabio