Stop text from wrapping under an icon inside an anchor

I'm trying to create a link that is represented by an icon (I'm using font-awesome for icons) and some text. If the text wraps down to the next line I want it in line with the text, rather than appearing under the icon.

I've tried a solution I found in this answer and it seems to work fine for me

<a>
    <i class="fa fa-exclamation-circle"></i>
    <p>Text of the link</p>
</a>


    i {
       float: left;
    }
    p {
       overflow: hidden;
    }

However, in Eclipse where I'm representing this (in a JSP page) it throws a warning ("invalid location of tag p") that I can't have a paragraph tag inside an anchor (I gather allowing that is an HTML5 standard).

Using span instead of p doesn't seem to work.

Does anyone know how to accomplish this with a span? Or know of a better way to do this?

I need to support IE8+, so I don't think any flexbox stuff would work.

To be clear I would like this:

*FA-icon*   Lorem ipsum dolor sit amet, consectetur
            adipiscing elit, sed.

Instead of this:

*FA-icon*   Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt