title: CSS icon using :before keep text from wrapping under
body: <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="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="noreferrer">fiddle</a></p>