title: Aligning H3 tag and icon
body: <p>I'm trying to align a h3 element with a font awesome icon and I just can't get them to play nicely.  there seem to be quite a few questions along these lines but I can't seem to extrapolate what I need.</p>
  <p>If you see the below the info icon is aligned below the text.  I've tried a number of things to sort it out and I've failed.  Now I'm hoping someone may take pity and point out what I need to do ?</p>
  
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet"/&gt;
  
  &lt;div style="display:inline-block"&gt;
    &lt;h3 style="display:inline;"&gt;The monkey talks!&lt;/h3&gt;
    &lt;span id="terminatorinfoIcon" class="fa-stack d-inline-block"&gt;
       &lt;i class="fa fa-circle-thin fa-stack-2x"&gt;&lt;/i&gt;
          &lt;i class="fa fa-info fa-stack-1x"&gt;&lt;/i&gt;
      &lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>