Fontawesome icon prevent newline wrapping

Question

how can I prevent a newline to be inserted between a fontawesome icon and the text that is near this icon ?

See the fiddle, I have a nbsp, but it is discarded.

In the example below, I don't want a wrap to ever occur between the icon and the word "first", but it can occur between "first" and "second". It doesn't work though, see the fiddle.

  <i class="fa fa-search"></i>&nbsp;first second 

It is related to this question, but I can't seem to make it work:

Attach font icon to last word in text string and prevent from wrapping

Answer 1

Add the CSS: .fa { display:inline; }

Demo fiddle.

Answer 2

Since the text you're trying to NOT wrap is not inside any element, how would css know where to wrap or not wrap? The width of the jsfiddle .test was 20px, that is the same width (approx) of the icon, so I don't really understand. If you don't want something to wrap, here's one way of doing this, wrap what you want to not wrap inside an inline element, like a span, then add the class you want on that span.

HTML Abcdef ghijklmnopqrstuvwxyz

CSS:

.test {     width: 100px; /*20px is too small the icon is 20px (approx) you need more space */ }  .test span {white-space:nowrap} 

Demo: http://jsbin.com/rineye/2/edit