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.

Answer 1

This seems to work, click Run code snippet below:

body {
  text-align: center;
}

.resizable-wrapper {
  border: solid 1px black;
  resize: both;
  overflow: auto;
}

.item {
  position: relative;
  padding-left: 20px;
}

.item + .item {
  margin-left: 20px;
}

.fa {
  position: absolute;
  top: 0;
  left: 0;
}

<div class="resizable-wrapper">

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

<span class="item"><i class="fa fa-flag"></i>Lorem</span> <!-- lots of these -->
<span class="item"><i class="fa fa-flag"></i>ipsum</span>
<span class="item"><i class="fa fa-flag"></i>dolor</span> <span class="item"><i class="fa fa-flag"></i>sit</span> <span class="item"><i class="fa fa-flag"></i>amet,</span> <span class="item"><i class="fa fa-flag"></i>consectetur</span> <span class="item"><i class="fa fa-flag"></i>adipiscing</span> <span class="item"><i class="fa fa-flag"></i>elit.</span> <span class="item"><i class="fa fa-flag"></i>Proin</span> <span class="item"><i class="fa fa-flag"></i>rutrum</span> <span class="item"><i class="fa fa-flag"></i>libero</span> <span class="item"><i class="fa fa-flag"></i>eget</span> <span class="item"><i class="fa fa-flag"></i>justo</span> <span class="item"><i class="fa fa-flag"></i>tempor</span> <span class="item"><i class="fa fa-flag"></i>ornare.</span> <span class="item"><i class="fa fa-flag"></i>Sed</span> <span class="item"><i class="fa fa-flag"></i>aliquam</span> <span class="item"><i class="fa fa-flag"></i>libero</span> <span class="item"><i class="fa fa-flag"></i>sed</span> <span class="item"><i class="fa fa-flag"></i>quam</span> <span class="item"><i class="fa fa-flag"></i>facilisis</span> <span class="item"><i class="fa fa-flag"></i>fringilla.</span> <span class="item"><i class="fa fa-flag"></i>Pellentesque</span> <span class="item"><i class="fa fa-flag"></i>habitant</span>

</div>

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

Answer 3

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

Demo fiddle.

Answer 4

I had this issue and the cause was that the font awesome icon was automatically being inserted within it's own new p element. I'm not sure why this was happening, but I solved it with this CSS:

p { display: inline;}

Make sure you specify which p element you're targeting, so that you don't change every p element on your page!