Centering Fontawesome Icons Vertically and Horizontally

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/

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>

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

How to center ` span ` font awesome icons vertically with one another

Your display: flex and align-items: center must be on the container

.announcement-card-body {
  display: flex; 
  align-items: center; 
  justify-content: center;
}

<div class="announcement-card-body modal-body card border-0">
  <span class="info fa fa-info-circle"></span>
  <span class="star fas fa-star fa-lg "></span>
</div>

Bulma and Fontawesome: How to align icons vertically and horizontally?

I found and applied a working solution just by targeting the span element in my CSS file and by making it a flex-container:

.icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

Center Text with FontAwesome Icon

Instead of adding vertical-align: middle to the <a> element, you need to apply it to the :before element itself:

#rk-lesson-menu {

  display: inline-block;

  width: 100px;

  height: 60px;

  float: right;

  text-align: center;

  border-left: 1px solid #DDD;

  line-height: 60px;

  text-decoration: none;

}

#rk-lesson-menu:before {

  font: 28px/60px fontawesome;

  content: "\f0c9";

  padding-right: 3px;

  vertical-align: middle;

}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />

<a id="rk-lesson-menu" class="rk-menu" href="">MENU</a>

Fontawesome icons need to be next to each other horizontally

You must just do this and remove inline_block

.fa {
      display: flex;
 }

If anything else you want, tell what you want to do.

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

You can use line-height to align the icon in the div.

Try adding this .fa-camera-retro { line-height: inherit;} to your css. Using inherit makes line-height take on the height of its containing div, so all icons will be centered even if those divs are different sizes. If you want, you can also set the line-height to the div's height in pixels to explicitly center it, ie line-height: 80px
.

Here's the example working in a fiddle.

Vertical center font awesome icon

Apply display:flex , align-items:center , justify-content:center to the .icon class...

...or use d-flex align-items-center justify-content-center bootstrap predefined classes in the .icon

Stack Snippet

.inputBox .content {

  flex: 2;

}

.inputBox .icon {

  flex: 1;

  max-width: 50px;

  display: flex;

  align-items: center;

  justify-content: center;

}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div>

  <div class="inputBox d-flex">

    <div class="bg-dark text-white rounded-left p-2 content align-middle">

      <input name="text" placeholder="This is a test" />

      <span>Link text</span>

      <br /> test<br />

    </div>

    <a href="#" class="bg-info text-white p-2 icon">

      <i class="fa fa-edit fa-lg"></i>

    </a>

    <a href="#" class="bg-danger text-white p-2 icon rounded-right">

      <span>

        <i class="fa fa-trash fa-lg"></i>

    </span>

    </a>

  </div>

</div>

---

Related Topics