Centering FontAwesome icons vertically and horizontally
I have used transform to correct the offset. It works great with round icons like the life ring.
<span class="fa fa-life-ring"></span>
.fa {
transform: translateY(-4%);
}
This is all you need, no wrapper needed:
.login-icon{
display:inline-block;
font-size: 40px;
line-height: 50px;
background-color:black;
color:white;
width: 50px;
height: 50px;
text-align: center;
vertical-align: bottom;
}
http://jsfiddle.net/e2UPC/6/