Icon left of multi-line heading

Question

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.

What it currently looks like:

What I want:

Here's the simplest form of what I have (fiddle):

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

I've tried separating the icon into a separate h1, then float or inline display each of those, but because it's multi-line text none of that has worked.

What's a clean way to get this alignment I'm looking for?

Answer 1

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.

Answer 2

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