Question

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

由于图标的性质是不同的形状，具有不同的宽高比，当您在同一行上放置具有相同字体大小或fa-2x（等）的字体真棒图标时，它们的高度和基线不会对齐水平。事实上，我已经注意到，对于图标如何垂直排列在一起，并不是一个默认值。有些人以随机高度坐在基线上方。此外，在相同的大小或字体大小下，图标在视觉上看起来大小上有很大差异。例如手机图标与麦克风。

关于手机图标的奇怪之处在于它如何漂浮在基线之上，因为它似乎有一个内置填充，我似乎找不到覆盖的方法。使用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对齐，这样当它们并排放置时，它们在视觉上看起来完全相同？

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;

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

使一行Font Awesome Icons高度相同

1 个答案: