font-awesome aligning multi line text correctly

Question

I have an icon with text to the right of it like so:

<p style="text-align: left;">
    <i class="fa fa-example-icon" style="margin-right: 20px;"></i> 
    Text that is multi-lined.
</p>

Which aligns text and the icon for the first line. For example,

|icon| Text that is multi-lined.

But when text goes to the next line it appears as so:

|icon| Text that is multi-lined and now
it actually comes to the next line.

I want:

 |icon| Text that is multi-lined and now
        it actually comes to the next line.

What is the best way to have the text completely aligned with multiple lines? I have some hacks but want to do it correctly.

Answer 1

You may do it like this:

.parent{
  width: 150px;  
}
.parent, .text{
  overflow: hidden;  
}
.text{
  margin: 0;
}
.fa-example-icon{
 float: left;
  display: block;
}

<div class="parent" style="text-align: left;">
    <i class="fa fa-example-icon" style="margin-right: 20px;">Icon</i> 
    <p class="text">Text that is multi-lined. This is multi line text Text that is multi-lined. This is multi line text Text that is multi-lined. This is multi line text Text that is multi-lined. This is multi line text</p>
</div>