垂直对齐图标与字体真棒

Question

这应该很简单： 我试图将每个图标对齐到底部，但我只能用其中两个图标。

HTML：

<i class="fa-desktop fa"></i>
<i class="fa-laptop fa"></i>                
<i class="fa-tablet fa"></i>
<i class="fa-mobile fa"></i>

的CSS：

i {
    font-size: 200px;
    vertical-align:bottom;
}
.fa-laptop {
    font-size:120px
}

演示：http://fiddle.jshell.net/7mfV7/3/

Answer 1

问题是每个元素的垂直填充不受我们的控制，因为它是一个图标字体。唯一的方法是手动。获取所需大小，然后使用position:relative和top。