How to center align font awesome icons vertically in a circle div?

Question

I\'m trying to center align font awesome icons center by vertically. If there is text we can do it using line-height property even i tried giving the lin

Answer 1

Not to detract from the above solution which functions perfectly, but Font Awesome 4 has a great stacking feature that can be used with the following code.

<span class="fa-stack fa-2x">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>

There's some really nice options and combinations that can be found here.

Answer 2

Using the fa-fw class makes them correctly aligned.

<div class="col-sm-1"> 
    <i class="fa fa-mobile fa-fw"></i>
</div>

Check it in action. http://jsfiddle.net/ahj0ncpa/

Answer 3

I faced a similar problem to vertical aligning a font awesome icon in chrome and Mozilla.

I had a div wrapping my font awesome element.

My HTML is:

<div class="icon-wrap">
    <span class="fa fa-times"></span>
</div>

giving font size in em solved the problem.

Answer 4

This question was asked +4 years ago and technology and browser compatibility has changed quite a lot. Another, more modern approach is use of Flexbox. It's scaleable and you can style a single element instead of styling the parent element and the child element.

What is wonderful about this approach is if you update the width or height, it will automatically with out updating anything else stay vertically and horizontally center.

Pros: It works with a single font-icon no problem

Cons: If you want to use a font-icon plus text like, "download" you will need to remove the "width" and it will still work as intended

Example:

.exp {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 30px;
    width: 30px;
    padding: 10px;
    color: white;
    background-color: green;
    border-radius: 50%;
    box-sizing: border-box;
}

Working Example: http://jsfiddle.net/iandonahue/M3jxT/1409/

Answer 5

Set a class for font awesome such as .fa-vc then add it to all font awesome font you want it to be aligned with other text. your code will looks like(this sample is a 'x' sign)

<i class="fa fa-times fa-vc"></i>

and set this class to

.fa-vc{line-height:inherit!important;}

this will override font awesome's default setting (line-height:1px)

problem solved...

Answer 6

the equal line-height and text-align: center works very well to make icon in the middle both vertically and horizontally. However, if you want to make anything centered both vertically and horizontally in a dynamic way, code like this -

markup:

<div class="container>
   <div class="target">
   </div>
</div>

css:

.container{
   position: relative;
}

.target{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}