Search code examples
cssglyphicons

How to display glyphicon icon in the same line as subsequent text

HTML:

<ul>
<span class="glyphicon glyphicon-ok"></span> this is the line 1<br>    
<span class="glyphicon glyphicon-ok"></span> this is the line 2<br>
<span class="glyphicon glyphicon-ok"></span>  this is the line 3
</ul>

Page displays icon and text in two different lines. enter image description here I inspected in chrome browser and put display:inline for glyphicon class, it worked in browser. But When I put the code in css file, it does not overwrite. How can I put texts and icon on same line?

Solution

  • This is invalid HTML - inside of a ul element you need to use li elements (which makes the br tags superfluous). Plus change display of the .glyphicon class to inline, since you say it doesn't overwrite it properly, add !important:

    ul {
  list-style: none;
}
.glyphicon {
  display: inline !important;
}
    <ul>
  <li><span class="glyphicon glyphicon-ok"></span> this is the line 1</li>
  <li><span class="glyphicon glyphicon-ok"></span> this is the line 2</li>
  <li><span class="glyphicon glyphicon-ok"></span> this is the line 3</li>
</ul>