使一行Font Awesome Icons高度相同

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 ）。也许值得向英足总团队请求重新考虑。

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

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

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