How to Center Font Awesome Icons Horizontally

How to center Font Awesome icons horizontally?

Add your own flavour of the font awesome style

[class^="icon-"], [class*=" icon-"] {
    display: inline-block;
    width: 100%;
}

which along with your

td i {
    text-align:center;
}

should center just the icons.

Centering FontAwesome icons vertically and horizontally

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/

How to center text vertically with a large font-awesome icon?

After considering all suggested options, the cleanest solution seems to be setting line-height and vertical-align everything:

See Jsfiddle Demo

CSS:

div {
    border: 1px solid #ccc;
    display: inline-block;
    height: 50px;
    margin: 60px;
    padding: 10px;
}
#text, #ico {
    line-height: 50px;
}

#ico {
    vertical-align: middle;
}

Horizontally centering Font Awesome icon and text

Get the icon and the text in a p element, then center the p.

See this Pen.

html

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<div class="container">
  <p><i class="fas fa-camera-retro"></i> Icon text</p>
</div>

css

.container p {
  text-align: center;
}

Horizontally and vertically center a (font-awesome) icon over an image

Use this code:

.container {  position: relative;  width: 100%;  max-width: 400px;}
.image {  display: block;  width: 100%;  height: auto;}
.overlay {  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;  height: 100%;  width: 100%;  opacity: 1;
}
.icon {  color: white;  font-size: 10vw;  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  -ms-transform: translate(-50%, -50%);  text-align: center;}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><div class="container">  <img src="https://via.placeholder.com/300" alt="Avatar" class="image">  <div class="overlay">  <a href="#" class="icon" title="User Profile">   <i class="fa fa-microphone fa-3x watermark"></i>  </a>  </div></div>

CSS - Center Font-awesome icons

Kill the unnecessary padding (which leaves no room for the icons) and let the width/height/line-height of the elements determine their layout.

Before:

padding: 15px;
width: 7.5px; 
height: 7.5px;
line-height: 7.5px !important;

After:

width: 30px;
height: 30px;
line-height: 30px !important;

You can also remove some redundant styles from your :hover states.

Live example:

.fa {  text-align: center;  vertical-align: middle;  text-decoration: none;  margin: 15px 3px;  border-radius: 50%;  width: 30px;  height: 30px;  font-size: 15px;  line-height: 30px !important;}
.fa {  background: #F0F0F0;  color: #282828;}
.fa:hover {  color: #fff;}
.fa-facebook:hover {  background: #3B5998;}
.fa-youtube:hover {  background: #bb0000;}
.fa-instagram:hover {  background: #125688;}
.fa-soundcloud:hover {  background: #ff5500;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /><a href="#" class="fa fa-facebook"></a><a href="#" class="fa fa-youtube"></a><a href="#" class="fa fa-instagram"></a><a href="#" class="fa fa-soundcloud"></a>

How to horizontally align layered icons in Font Awesome 5?

you need to use fa-4x on the parent element:

body {  font-size: 16px;  padding: 4rem;}

<script type="text/javascript" src="https://use.fontawesome.com/releases/v5.0.13/js/all.js"></script><span class="fa-layers fa-fw">  <i class="fas fa-ban"></i>  <i class="fab fa-facebook-f"></i></span>

<span class="fa-layers fa-fw fa-4x">  <i class="fas fa-ban "></i>  <i class="fab fa-facebook-f "></i></span>

Aligning font-awesome icons to center

1. You can move text-center to your column <div>, then all the text in this <div> will be centered (the first row in my example).
2. You can add extra <div> with class text-center and move your icon inside it (the second row in my example).

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><section>    <div class="container">        <div class="row">            <div class="col-md-4 text-center">                <i class="fa fa-book fa-3x" aria-hidden="true"></i>                <p>Ne mundi fabulas corrumpit vim, nulla vivendum conceptam</p>            </div>            <div class="col-md-4">                <div class="text-center">                    <i class="fa fa-book fa-3x" aria-hidden="true"></i>                </div>                <p>Ne mundi fabulas corrumpit vim, nulla vivendum conceptam</p>            </div>        </div><!--end row-->    </div><!--end container--></section>

---

Related Topics