Centering FontAwesome icons vertically and horizontally

Question

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 1

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/

Answer 2

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%); }