How to Vertically Align the Text with a Large Font Awesome Icon

Solutions with the CSS vertical-align property

If you want to make a text appear vertically aligned next to a Font Awesome icon, you can use the CSS vertical-align property set to “middle” and also, specify the line-height property. Change the size of the icon with the font-size property.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Example of vertically aligning a text with an icon by using the vertical-align and line-height properties:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <link rel="stylesheet" type="text/css" href="//use.fontawesome.com/releases/v5.7.2/css/all.css">
    <style>
      div {
        border: 1px solid #666;
        display: inline-block;
        height: 50px;
        margin: 30px;
        padding: 2px;
      }
      #text,
      #icon {
        line-height: 50px;
      }
      #icon {
        vertical-align: middle;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <div>
      <i id=icon class="fas fa-bullhorn"></i>
      <span id="text">Hello World</span>
    </div>
  </body>
</html>

Let’s see another example without using the line-height property.

Example of vertically aligning a text with an icon by using the vertical-align property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <link rel="stylesheet" type="text/css" href="//use.fontawesome.com/releases/v5.7.2/css/all.css">
    <style>
      .icon {
        vertical-align: middle;
        font-size: 40px;
      }
      .text {
        font-family: "Courier-new";
      }
      .container {
        border: 1px solid #666;
        border-radius: 6px;
        display: inline-block;
        margin: 40px;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <span class="fas fa-plane icon"></span>
      <span class="text">Travelling</span>
    </div>
  </body>
</html>