Font-awesome icons are not vertically centered

Question

I'm using the latest font-awesome library (4.4) and it seems some icons are not vertically centered or they have different sizes.

Reproduction online

I made a zoom over a font-size: 14px; list here:

Is there anything I'm doing wrong?

Answer 1

.quick-actions i {
    font-size: 54px;
    cursor: pointer;
    color: #999;
    vertical-align: middle;
}
.fa:before {
    vertical-align: middle;
}
.quick-actions{
    border:1px solid #ccc;
    display: inline-block;
}

This seems to work... http://jsfiddle.net/nh1sgw1a/

Edit (I see it really is a problem with fa-commenting-o):

.quick-actions i.fa-commenting-o:before{
    font-size:50px;
    /*margin-top:-5px;*/
    float:left;
}

http://jsfiddle.net/nh1sgw1a/2/

Answer 2

Like said in the comments, they aren't drawn centered in the middle of the horizontal axis of its shape, and that's why they look like being in different heights. That said, I found this CSS rule useful to place them closer to the middle edge of my buttons/bars (more vertically centered, although not perfect):

i.fa {
  vertical-align: middle;
}