How to vertically align center a Font-Awesome icon with a line of text in Bootstrap 4?

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

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> 

Answer 2

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/