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

In-depth look at centering techniques

Let's dig a little deeper and understand some of the additional techniques you can modify to have your icons and text look great.

Using CSS classes for organization

In lieu of inline styles, we can define a CSS class for scalability. It leads to cleaner and more maintainable code:

.icon-text-wrapper {
  display: flex;
  align-items: center;
}


<div class="icon-text-wrapper">
  <i class="fas fa-icon fa-4x"></i><span>Your Text</span>
</div>


Proportional icon sizing

Font Awesome provides us with handy classes like .fa-2x, .fa-3x, etc., to keep the icon size consistent. You can couple this with font-size adjustments to ensure your text complements the icon size:

.text-large-icon {
  font-size: 1.5rem; /* Who said size doesn't matter? Adjust the size as required ;) */
}


Alignment control with line-height

Introduce the line-height property for scenarios where you might need to bypass Flexbox or for more precise adjustments:

.vertical-center {
  line-height: 3em; /* It's like Goldilocks... Not too high, not too low, just right */
}


Leveraging the power of Flexbox

Use justify-content to hone control over the horizontal spacing. If you wish to have a different stacking of elements, flex-direction can be your best friend:

.icon-text-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Like a bouncer at the club, controlling space around elements */
  flex-direction: row; /* Change to column for a new look */
}


Tweaking with padding and margin

Sometimes, the final touch might just be a little padding or margin:

.icon-text-spacing {
  padding: 0 10px; /* Like marshmallows in hot chocolate, adds that extra fluffiness around the icon and text */
}


Tackling icon-specific adjustments

When dealing with Font Awesome 5 and beyond, remember the .svg-inline--fa class. It's just what the doctor ordered when making icon specific adjustments:

.svg-inline--fa {
  height: 2em; /* Align the stars, or in this case, align the height with text's line-height */
  width: auto; /* Maintain proportions without going Picasso */
  vertical-align: -0.125em; /* A pinch of vertical alignment */
}


Avoiding style conflicts

When you're overriding .fa or other global classes, watch out for the rampant use of !important. It can override styles when and where you least expect them:

.fa {
  line-height: inherit !important; /* Only if you dare, this can result in the CSS equivalent of a wild goose chase */
}


SVG with Font Awesome: Two peas in a pod

Going SVG route with Font Awesome? Modify the align attributes within the <svg> tag for the best control over positioning alongside text:

<svg class="svg-inline--fa fa-w-16" style="align-self: center;" xmlns="http://www.w3.org/2000/svg"></svg>
