Icon left of multi-line heading

A little late to the party, but if anyone else is having the same issue - this is an easy fix with CSS Flexbox (which is a new...ish style, but by this point is pretty robustly supported).

(Note for code below: You can wrap the <i> in a <div>, or something else if necessary, but I would advise against including a second <h1> tag as that could cause SEO issues. Basically, you need the .wrapper class with two children - one as the icon (or a div containing the icon), and one as the header.)

First, the new HTML:

<div>
  <i class="fa fa-file-text fa-fw fa-lg"></i>
  <h1>Multi-line Title</h1>
</div>

And the new CSS:

div {
    display: flex;
    align-items: center;
}

Note: align-items: center; sets vertical alignment. This can also be flex-start (top-aligned) or flex-end (bottom-aligned) as desired.

Add this

div h1 {
display: inline-block;
position: relative;
padding-left: 55px;
vertical-align: middle;
}

div h1 i {
position: absolute;
left: 0;
top: 50%;
margin-top: -10px; // half height of icon
}

Fiddle