How to Center Text Vertically With a Large Font-Awesome Icon

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 vertically center a font-awesome icon?

With position: relative, you make the icon a container for absolute positioned items inside of it or for pseudo classes, like :before or :after.

A absolute positioned item inside of a relative positioned container can be centered horizontally and vertically as follows:

.center-horizontally-and-vertically {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

how-to-center-an-element-horizontally-and-vertically

Example

.btn-glyphicon {
  position: relative;
  padding: 3px;
  background: #ffffff;
  margin-right: 4px;
  border-radius: 50px;
  width: 1.5em;
  height: 1.5em;
  text-align: center;
  vertical-align: middle !important;
  align-items: center;
}

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

.icon-btn {
  padding: 1px 15px 3px 2px;
  border-radius: 50px;
  text-align: center;
  vertical-align: middle;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<a class="btn icon-btn btn-success" href="#">
  <i class="btn-glyphicon text-success fa fa-plus"></i> Add
</a>

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>

CSS vertically align center font awesome icon to text

Use i { vertical-align: middle; }

body {  font-family: Arial, 'sans-serif';}
a {  font-weight: 500;  font-size: 30px;  color: #000;}
i {  font-size: 12px !important;  font-weight: 300;  vertical-align: middle;}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /><div>  <a href="#">View Full Chart <i class="fa fa-chevron-right" aria-hidden="true"></i></a></div>

How to vertically center text with larger icon?

You can use vertical-align:

.fa {
  vertical-align: middle;
}

jsFiddle

Or, use flexbox:

.alert {
  display: flex;
  align-items: center;
}

jsFiddle

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>

Vertically center font awesome icon and text inside an a tag/router-link

Try that :)

.main-navigation-button primary-custom-color {
display:flex;
flex-direction:column;
justify-content: center;
align-items:center
}

small example -> https://codepen.io/AdamKniec/pen/jObzLRm

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>

How to vertically align font-awesome icons in a button?

The float-left on the icon is throwing off the vertical alignment. If you want the icon aligned to the left, and the text centered, you can use flexbox and defined widths like this...

<a class="btn btn-lg btn-primary btn-block d-flex align-items-center px-0" role="button">
      <span class="w-25 fas fa-music fa-lg my-icon"></span> 
      <span class="w-50 my-text">Music</span>
      <span class="w-25"></span>
</a>

If you want both icon and text centered it's much simpler. Just remove the float and add align-middle to the btn...

<a class="btn btn-lg btn-primary btn-block align-middle" role="button">
  <span class="fas fa-music fa-lg my-icon"></span> 
  <span class="my-text">Music</span>
</a>

Demo: https://www.codeply.com/go/iJV8uQDVVD

How to Center Text Vertically With a Large Font-Awesome Icon