Nix Nix - 2 months ago 8
CSS Question

Centering FontAwesome icons vertically and horizontally

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/

Answer

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/

Comments