icons - 使一行 Font Awesome Icons 高度相同

Question

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

由于图标的性质是具有不同纵横比的不同形状，当您将具有相同字体大小或 fa-2x(等)的 Font Awesome 图标放在同一行上时，它们的高度和基线不会水平对齐。事实上，我注意到图标垂直排成一排的方式似乎没有太多默认设置。有些位于随机高度的基线之上。同样在相同的 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;
}

任何人都知道将我的 Font Awesome 图标与 CSS 对齐的正确方法，以便它们在并排放置时在视觉上看起来完全相同？

Answer 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;

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