font awesome - Vertically aligning two FontAwesome icons

Question

I have some simple code which includes two font icons from FontAwesome.

They render like this in my browser:

Note that although both elements are 16px in height, the two icons are not vertically aligned, the calendar rests lower down than the

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://pro.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet"/>


<p>
  <i class="fad fa-times-hexagon text-danger fa-fw"></i>
  <i class="fad fa-fw fa-calendar"></i>
</p>

Answer 1

This would appear to be a problem with the glyphs defined in the font itself