Icons are not visible in sidebar's list li class="nav-item"

I need to put icons before side menu's text. I tried many ways those are not working.

<div class="collapse navbar-collapse" id="navbarCollapse">
<ul style="background-color:purple; padding-left: 20px;" class="navbar-nav mr-auto sidenav" id="navAccordion">
  <li class="nav-item">
    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Property <span class="sr-only">(current)</span></a>        
  </li>
</ul>
</div>

I tried below combinations

<li class="nav-item">
<a href="#">
  <li><a href="#">Envelope icon: <span class="glyphicon glyphicon-envelope"></span></a></li>
</a>
</li>

<li class="nav-item">
    <p><a href="#"> <i class="fa fa-home fa-fw"> </i>&nbsp; Home </a></p>
</li>

<li class="nav-item">
    <a class="nav-link" href="#"> <i class="fa fa-home fa-fw"> </i> Home <span class="sr-only">(current)</span></a>
</li>

This is my output screen, where no icon available

Solution

I see you are trying to use FontAwesome icons. Have you got the appropriate fontawesome.css referenced in your <head>?

Ie;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">