我正在建设一个网站,我想让一排 FontAwesome 图标在视觉上具有相同的高度。这也意味着我希望它们都坐在同一基线上。
由于图标的形状不同,长宽比也不同,当您在同一行上放置相同字体大小或 fa-2x(等等)的 FontAwesome 图标时,它们的高度和基线在水平方向上不对齐。实际上,我注意到,在一行中垂直地并排放置这些图标时,它们似乎没有默认的排列方式。其中一些会以随机高度位于基线之上。而且在相同的 fa-size 或 font-size 下,这些图标可能在视觉上显示出戏剧性的大小差异。例如,与麦克风图标相比,移动电话图标的奇怪之处在于它浮在基线之上,因为它似乎具有内置填充,我找不到覆盖它的方法。使用 vertical-align: baseline 等无济于事。
以下是 HTML:
CSS:
由于图标的形状不同,长宽比也不同,当您在同一行上放置相同字体大小或 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图标进行对齐,使它们在放置在一起时在视觉上看起来高度相同吗?