Centering FontAwesome icons vertically and horizontally

css, font-awesome, twitter-bootstrap

Solution

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/

Problem

I'm currently using FontAwesome, and am having a really hard time centering the icons both vertically and horizontally in their container. I have tried doing it via positioning and ran into issues bc the icon sizes were different. I basically have the horizontal, and am trying to get the vertical. ``` <div class='container'> <div class='row'> <div class='offset2 span6 loginContainer'> <div class='row'> <div class='login-icon'> <i class='icon-user'></i> </div> <input type="text" placeholder="Email" /> </div> <div class='row'> <div class='login-icon'><i class=" icon-lock "></i></div> <input type="password" class="" placeholder="Password" /> </div> </div> </div> </div> .login-icon{ font-size: 40px; line-height: 40px; background-color:black; color:white; width: 50px; height: 50px; } .login-icon [class*='icon-']{ height: 50px; width: 50px; display: inline-block; text-align: center; vertical-align: baseline; } ``` http://jsfiddle.net/ncapito/e2UPC/

Original source