How to Vertically Align Text with Icon Font

How to vertically align text with icon font?

In this scenario, since you are working with inline-level elements, you could add vertical-align: middle to the span elements for vertical centering:

.nav-text {
  vertical-align: middle;
}

Alternatively, you could set the display of the parent element to flex and set align-items to center for vertical centering:

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

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

Vertical Align Text After Font Icon

One of the ways would be to use inline-block display and middle align it - see demo below:

.wrapper > * {  display: inline-block;  vertical-align: middle;}.blue {  color: blue;}.white {  color: white;}

<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">
<div class="col-md-4 wrapper">    <span class="fa-stack fa-2x">        <i class="fa fa-circle fa-stack-2x blue"></i>        <i class="fa fa-wifi fa-stack-1x white"></i>    </span>    <h4 class="blue">Free wifi</h4></div>

How to vertically align a text along with a double sized icon font icon in Tailwind CSS?

You can make use of align-middle for your icon. It works even regardless of being inside a div or td

<link href="https://cdnjs.cloudflare.com/ajax/libs/line-awesome/1.3.0/line-awesome/css/line-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.6.2/tailwind.min.css" rel="stylesheet"/>
<div class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-black-500">
    <i class="las la-circle-notch text-3xl align-middle"></i>
    <span>Provisioning</span>
</div>

CSS - Center align text with icon

To vertically center elements, you can use the vertical-algin: middle; rule. In your case, that would most propably be:

.material-icons {
  vertical-align: middle;
}

Here is an example with your dark button:

.material-icons {  vertical-align: middle;  margin-right: 5px;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet" /><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<a href="#" class="grey darken-3 btn"><i class="material-icons">group_work</i>Groups</a>

How to align text and :before icon vertically center?

You can use a flexbox or grid to center the text en icon perfectly.
Below an example using flexbox.

.status {
    /* Added */
    display: flex;
    align-items: center;
}

.success {
    font-family: roboto;
    color: #27ae60;
    background: #e1e1e1;
    border-radius: 50px;
    padding: 0px 50px 0px 50px;
    font-size: 38px;
}

.success:before {
   font-family: FontAwesome; 
   content: "\f111"; 
   font-size: 10px;
   margin-right: 16px;
   color: #27ae60;
   /* vertical-align: middle; Removed */
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet">

<div class="status success">Purchuased</div>

How to vertically align icon font

You can try vertical-align: text-bottom or vertical-align: text-top, depending on which one you feel is more vertically centered.

For your shopping cart icon, it seems text-top is most vertically centered.

Example at: https://jsfiddle.net/p3g189bg/

Vertical alignment of text and icon in button

There is one rule that is set by font-awesome.css, which you need to override.

You should set overrides in your CSS files rather than inline, but essentially, the icon-ok class is being set to vertical-align: baseline; by default and which I've corrected here:

<button id="whatever" class="btn btn-large btn-primary" name="Continue" type="submit">
    <span>Continue</span>
    <i class="icon-ok" style="font-size:30px; vertical-align: middle;"></i>
</button>

Example here: http://jsfiddle.net/fPXFY/4/ and the output of which is:

Sample Image

I've downsized the font-size of the icon above in this instance to 30px, as it feels too big at 40px for the size of the button, but this is purely a personal viewpoint. You could increase the padding on the button to compensate if required:

<button id="whaever" class="btn btn-large btn-primary" style="padding: 20px;" name="Continue" type="submit">
    <span>Continue</span>
    <i class="icon-ok" style="font-size:30px; vertical-align: middle;"></i>
</button>

Producing: http://jsfiddle.net/fPXFY/5/ the output of which is:

Sample Image

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 Vertically Align Text with Icon Font