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/

Illomened

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/

Kernel

You have hard coded line-height this is not dynamic. vertical-align is not used here. – Toboggan

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

Valentine

@ObsidianAge - if swapping out 11 lines of CSS for 3 isn't a better solution (to a very widespread problem that a lot of us have regularly), I don't know what is. – Naga

@ObsidianAge this is a perfect example of the correct time to add a new answer to an old, accepted question. – Alltime

For me I was using left and right chevrons, in a div to look like buttons, the chevrons would always be off center, and the accepted answer did nothing, transform: translateX(); was the only way I could get them to move – Thar

Answer 3

the simplest solution to both horizontally and vertically centers the icon:

<div class="d-flex align-items-center justify-content-center">
    <i class="fas fa-crosshairs fa-lg"></i>
</div>

Selene

This IMO is the best and cleanest solution, thanks :) – Enroot

Answer 4

So I finally got it(http://jsfiddle.net/ncapito/eYtU5/):

.centerWrapper:before {
    content:'';
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

.center {
    display:inline-block;
    vertical-align: middle;
}

<div class='row'>
    <div class='login-icon'>
        <div class='centerWrapper'>
            <div class='center'> <i class='icon-user'></i></div>
       </div>
    </div>
    <input type="text" placeholder="Email" />
 </div>

Illomened

Take a look at my answer, I think yours don't look so centered – Kernel

Answer 5

I just lowered the height to 28px on the .login-icon [class*='icon-'] Here's the fiddle: http://jsfiddle.net/mZHg7/

.login-icon [class*='icon-']{
    height: 28px;
    width: 50px;
    display: inline-block;
    text-align: center;
    vertical-align: baseline;
}

Plate

Answer 6

You can use vertical transform:

<span class="fas fa-user" style="transform: translateY(-10%);"></span>

Nahamas

Answer 7

If you are using twitter Bootstrap add the class text-center to your code.

<div class='login-icon'><i class="icon-lock text-center"></i></div>

Lohrman

This only horizontally centers the icon. – Mattah

Answer 8

I just managed how to center icons and and making them a container instead of putting them into one.

.fas {
    position: relative;
    color: #EEE;
    font-size: 16px;
}
.fas:before {
    position: absolute;
    left: calc(50% - .5em);
    top: calc(50% - .5em);
}
.fas.fa-icon {
    width: 60px;
    height: 60px;
    color: white;
    background-color: black;
}

Recall

I tried to play with flex centering and vertical-align center, but I could not figure it out. Locating :before elements is resistent if positioning is set to static or relative. – Recall

Answer 9

I found a much more EASIER and SIMPLE way..

Add text-align:center; property to the parent element and add margin-top:50%; to add margin the top.

According to the problem :

.login-icon {
  text-align: center;
}

.icon-lock {
  margin-top: 50%;
}

Thanks Me Later.

Tiphani

Answer 10

In my case, I was able to use grid to center font awesome icons:

<div className="icon">
    <FontAwesomeIcon icon={faLocationDot} />
</div>

.icon {
    display: grid;
    grid-template-columns: repeat(1, 100%);
    place-items: center;
 }

Rasia