Icon breaks on another row when container is not big enough

[Cipa]

Hi,

Is there a solution to not allowing the icon to move by itself on the second row

Currently I have this one but I don't think it's acceptable. For generated content I will have to get the last word and wrap it in a nowrap tag.

<li style="display:block;width:120px;margin:100px;">
icon  <span style="white-space: nowrap">envelope<i class="icon-envelope"></i><span>
</li>

Is there a way to use the fonts as a background image or something similar, maybe how we used to implement .png icons?

Thank you

[pkrstic]

use

  

:)

or put

<li style="display:block;width:120px;margin:100px;white-space:nowrap">
icon envelope <i class="icon-envelope"></i>
</li>

[Cipa]

Not sure what you posted :) but this seems to work

<li style="display:block;width:120px;margin:100px;">
icon envelope<span style="white-space: nowrap">&nbsp;<i class="icon-envelope"></i><span>
</li>

note the  

[pkrstic]

Posted that but never tried to insert code in comment, check comment again, now everything is visible. If you have icons and don't have place to display them then something is wrong with design :(

[Cipa]

Nothing is wrong with the design, it's just text that flows as text should and it's placed inside one of the spans from the bootstrap grid. If you have a span of 4 and your text doesn't fit to the pixel, the icon will move on the second row. And because the span is fluid on smaller screens(100% width) when your are using the responsive part there is now way you can tell the span what width to be, it will take the width of the device.

Also I don't control the text, the editors do and they have no idea how to make it work using html. So I have to use, depending on the situation, a js or a php solution to insert the solution above.