CSS icon using :before keep text from wrapping under

Question

I have an icon placed using :before and the text following it sometimes wraps to two or three lines. When it wraps the text goes under the icon.

I am looking for CSS help to keep the text from wrapping under the icon.

Here is an image showing what I am referring to:

Current CSS:

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;
}

Here is a fiddle with my code: fiddle

Answer 1

Your :before pseudo-elements are floated, so what you're seeing is the natural wrapping of text around a floated element. To prevent that wrapping, you'll need to change the way you're positioning your pseudo-elements.

Since your icon has a fixed height and width that you know, why not add padding to your anchor tags and absolutely position the icon? That way, the padding will prevent the text from wrapping and your icon will sit right where you want it to.

a[href $='.pdf'], a[href $='.PDF'], a[href $='.pdf#'], 
a[href $='.PDF#'], a[href $='.pdf?'], a[href $='.PDF?'] {
    display: inline-block;
    padding-left: 30px; /* 20px icon width + 10px margin */
    position: relative;
}

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;
    font-size: 24px;
    vertical-align: middle;
}

.form-title:before {
    left: 0;
    position: absolute;
    top: 0;
}

And, here's your updated Fiddle showing that code in action.

Answer 2

• Float left the asset
• Overflow hidden the text element

a[href $='.pdf']:before /*etc...*/ {
  content: "\f1c1";
  font-family: 'FontAwesome';
  color: #999;
  margin: 0px 10px 0 0;
  font-size: 24px;
  float: left;
}
.form-title span {              /* WRAP TEXT IN SPAN */
  display: block;
  overflow: hidden;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

<div style="width:220px/*DEMOONLY*/;">
  <a href="/xxx.pdf" class="form-title">
    <span>xxxxx - CO Private Passenger Auto Insurance (Summary Disclosure Notice)</span>
  </a>
</div>