CSS icon using :before keep text from wrapping under <p>I have an icon placed using <code>:before</code> and the text following it sometimes wraps to two or three lines. When it wraps the text goes under the icon. </p> <p>I am looking for CSS help to keep the text from wrapping under the icon.</p> <p>Here is an image showing what I am referring to:<br> <a href="https://i.stack.imgur.com/6fYff.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6fYff.png" alt="wrap"></a></p> <p>Current CSS:</p> <pre><code>a[href $='.pdf']:before, a[href $='.PDF']:before, a[href $='.pdf#']:before, a[href $='.PDF#']:before, a[href $='.pdf?']:before, a[href $='.PDF?']:before { content: "\f1c1"; font-family: 'FontAwesome'; color: #999; display: inline-block; margin: 0px 10px 0 0; font-size: 24px; vertical-align: middle; } .form-title:before { float: left; } </code></pre> <p>Here is a fiddle with my code: <a href="https://jsfiddle.net/west4me/x0yyfxmm/" rel="nofollow noreferrer">fiddle</a></p>