Vertical align icons with font awesome

Question

This should be simple: I have tried to align every icon to the bottom, but I was only able to do it with 2 of them.

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
}

Demo: http://fiddle.jshell.net/7mfV7/3/

Answer 1

The problem is that the vertical padding on each element is out of our control, given that it's an icon font. The only way to do it is manually. Get them to the size you want and then use position:relative and top.