HTML Label with nonbreaking icon

[Speakerator]

Alright, I'm an HTML noob and mainly use JS with one specific framework my company uses, so please don't hit me, even though I guess, this is a prettry trivial question.

I have a header for some kind of matrix structure (predefined by some kind of online survey tool, that I want to customize. I need there to be a small icon next to each label. DOM-structure is like the following

 

<ul class="head odd i0">
  <li class="dimension odd">&nbsp;</li>
  <li class="odd itemhead i1">
    <span style="float: left;">
      <label class="noclick">Individualverhalten</label>
      <i class="material-icons" style="font-size:12px;">help</i>
    </span>
  </li>
  <li class="even itemhead i2">
    <label class="noclick" >Gruppenverhalten</label>
  </li>
<ul>

The only thing I added is the <i> tag to access the icon - which works just fine - and the span, since I want both to be on the same line. However, I cant get rid of the linebreak between the two - I guess, there is some style attribute which I miss, but due to my lacking experience in HTML & CSS... (I found display:inline-block; which looked promising, but did not work^^)

 

Any experts around?

Best regards, Chris

[chiwas]

Wrapping label and icon with floated span gives you nothing. Label and icon should be in the same line unless you have "display: block" value on one of those (default is "inline") . https://codepen.io/anon/pen/bpOpQq

You can try with "display: inline;" on label and icon or "float: left;" on label.

[Speakerator]

2 hours ago, chiwas said:

Wrapping label and icon with floated span gives you nothing. Label and icon should be in the same line unless you have "display: block" value on one of those (default is "inline") . https://codepen.io/anon/pen/bpOpQq

You can try with "display: inline;" on label and icon or "float: left;" on label.

Thanks. I googled a bit more and that should work, but it does not. I guess its due to the surrounding style classes, which I unfortunately neither can access nor change. I'll simply use a matching unicode symbol instead of an icon^^

But thanks for your help