Search code examples
htmlcsshtml-listsfont-awesome

Text in the <li> tag comes below the icon when it moves to next line

I have created an un-ordered list with a set of li tags. I am using font awesome icon as the icon before the text in the starts.

#facts i {
        margin-right: 1%;
        font-size: 150%;
        display: block;
        float: left;
    }
<ul id="facts" class="fa-ul">
      <li class="text-muted">
        <h6 class="text-uppercase"><i class="fa fa-archive fa-2x" aria-hidden="true"></i>&nbsp;Inventory Menu 
        </h6>
      </li>
      <li>
        <h6 class="text-uppercase"><i class="fa fa-industry fa-2x" aria-hidden="true"></i>&nbsp;<a href="warehouse_loc_maint_menu.html">Warehouse Location Maint Menu </a>
        </h6>
      </li>

The problem is that the text that comes in the next line comes below the fa icon. I want the text in the next line to start from the starting of the first line.

This is what comes as result: Text appears like this

Solution

  • Maybe this could help you

    #facts {
  width: 25px;
}
#facts i {
  position: absolute;
  left: 0px;
}
#facts li {
  position: relative;
  padding-left: 35px;
}
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<ul id="facts" class="fa-ul">
  <li class="text-muted">
    <h6 class="text-uppercase"><i class="fa fa-archive fa-2x" aria-hidden="true"></i>Inventory Menu 
    </h6>
  </li>
  <li>
    <h6 class="text-uppercase"><i class="fa fa-industry fa-2x" aria-hidden="true"></i><a href="warehouse_loc_maint_menu.html">Warehouse Location Maint Menu </a>
    </h6>
  </li>
</ul>