Group Glyphicon and text together

Question

I would like to group the Ticks and the Names together so that if a name goes onto a new line so does the tick and the full name

e.g.

<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Nydia Dahm
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Hillary Stano
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Mikki Rudisill
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Lashonda Hardcastle
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Starr Ewalt
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Geri Groen
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Armandina Foreman
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Alden Lusk

If I place the text into the span I seem to get extra spacing

https://jsfiddle.net/s7mtzt5f/

Answer 1

You need to wrap each group in a <span> and add the white-space:nowrap css style.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<span style="white-space:nowrap;"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Nydia Dahm</span>
<span style="white-space:nowrap;"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Hillary Stano</span>
<span style="white-space:nowrap;"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Mikki Rudisill</span>
<span style="white-space:nowrap;"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Lashonda Hardcastle</span>
<span style="white-space:nowrap;"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Starr Ewalt</span>
<span style="white-space:nowrap;"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Geri Groen</span>
<span style="white-space:nowrap;"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Armandina Foreman</span>
<span style="white-space:nowrap;"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Alden Lusk</span>

Update: bradlis7 pointed out that bootstrap has a text-nowrap class that does the same thing as the above. You should definitely use text-nowrap to make the code more concise and bootstrap-compliant. Use it like this:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<span class="text-nowrap"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Nydia Dahm</span>
<span class="text-nowrap"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Hillary Stano</span>
<span class="text-nowrap"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Mikki Rudisill</span>
<span class="text-nowrap"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Lashonda Hardcastle</span>
<span class="text-nowrap"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Starr Ewalt</span>
<span class="text-nowrap"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Geri Groen</span>
<span class="text-nowrap"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Armandina Foreman</span>
<span class="text-nowrap"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Alden Lusk</span>