css - 垂直对齐图标，字体很棒

Question

这应该很简单: 我试图将每个图标都对齐到底部，但我只能用其中的 2 个来做到这一点。

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。