How to vertically align center a Font-Awesome icon

Question

I am trying to align a Font Awesome icon vertically center to a small block or line of text. Here's a picture of what I'm trying to achieve: This is the look I'd like to achieve

The part of my webpage I am working on is seen here:This is the look my code currently produces. Note the unaligned FA icon , specifically, the code below is for the right side (column 2):

<div class="col-12 col-md-6 col-lg-5">
  <h4 class="text-center ">Honors and Awards</h4>
  <i class="fa fa-trophy fa-lg" aria-hidden="true"></i>
  <h5 class="text-center"> Boy Scouts of America Eagle Scout Rank</h5>
  <h6 class="text-center"> The Highest Rank in Scouting</h6>
  <h6 class="text-center"> April 2014 </h6>
</div>

Answer 1

Creating a grid using Bootstrap 4's awesome grid system, put the icon in the a smaller column on the left, and the text in another column that would appear on the right.

  <div class="container">
    <div class="row">
      <div class="col-12 col-md-6 col-lg-5">
        <div class="row">
          <div class="col-2">
            <i class="fa fa-trophy fa-lg" aria-hidden="true"></i>
          </div>
          <div class="col-10">
            <h4 class="text-center ">Honors and Awards</h4>
            <h5 class="text-center"> Boy Scouts of America Eagle Scout Rank</h5>
            <h6 class="text-center"> The Highest Rank in Scouting</h6>
            <h6 class="text-center"> April 2014 </h6>
          </div>
        </div>
      </div>
    </div>
  </div>

Here's a live example: http://jsbin.com/yejufib/edit?html

There are even better ways to achieve this and since you are already using Bootstrap I would recommend you to check this component: https://getbootstrap.com/docs/4.0/layout/media-object/

Answer 2

This layout is occurring because all of the elements are h's which are block level elements. In order to get it aligned as you wish - you need to either position it relatevely to the left, insert it into one the headings.

I wuld also say that this is entirely the wrong use of multiple heading elements

I would use a regular list - or a DL and apply the icon as a :before element to the left. Using a dl -means that yuo can just keep adding awards (ie: a new dt and associated dd's) as well as more / less descriptive content (ie: dd's) per award.

I also added classes to the dt's to allow different icons to be shown for each type of award. And I added a description class to the DD's which allows specific styling of the second line versus date line of content per award.

UPDATE - as per OP's comments - regarding wanting spinning icons when using the :before approach. I have added two lines of CSS to achive this

  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;

This was from @SatAj 's answer to this question:

Note that this animation will not necessarily work on older browsers suc as IE8, but most modern browsers should cope. Also - not all FA icons look good spinning IMO.

dl {margin-left: 40px}

dt {font-size: 1.6em;position:relative;}
dt:not(:first-of-type) {margin-top: 2em}

dt:before {
    content: ""; 
    font-family: FontAwesome;
    left: -40px;
    position:absolute;
    top: 5px;
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
 }
 
 dt.achievement:before {
    content: "\f091"; 
 }
 
  dt.academic:before {
    content: "\f19d"; 
 }
 

dd {margin-left: 0}
dd.description {font-size: 1.3em;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<h2>Honors and Awards</h2>

<div class="col-sm-12 col-md-6 col-lg-5">
  <dl>
    <dt class="achievement">Boy Scouts of America Eagle Scout Rank</dt>
    <dd class="description">The Highest Rank in Scouting</dd>
    <dd>April 2014</dd>
    
    <dt class="academic" >Principles Academic Award</dt>
    <dd class="description">The greatest achievement in academia</dd>
    <dd>June 2017</dd>
  </dl>
</div>