title: Icon left of multi-line heading
body: <p>I'm trying to display an icon (font awesome) to the left of a heading, which currently works when the heading is on a single line, but the alignment gets messed up when the heading goes onto a second line.</p>
  
  <p>What it currently looks like:</p>
  
  <p><img src="https://i.stack.imgur.com/qEWfG.png" alt="Bad title"></p>
  
  <p>What I want:</p>
  
  <p><img src="https://i.stack.imgur.com/jIaJP.png" alt="Good title"></p>
  
  <p>Here's the simplest form of what I have (<a href="https://jsfiddle.net/b8k79wqd/" rel="noreferrer">fiddle</a>):</p>
  
  <pre><code>&lt;div&gt;
    &lt;h1&gt;&lt;i class="fa fa-file-text fa-fw fa-lg"&gt;&lt;/i&gt;Multi-line Title&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've tried separating the icon into a separate <code>h1</code>, then float or inline display each of those, but because it's multi-line text none of that has worked.</p>
  
  <p>What's a clean way to get this alignment I'm looking for?</p>