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> 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
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">
Perhaps something like this should help? Let me know.
<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"> <div class="logo"> <img style="width:25px; height:25px" src="https://png.pngtree.com/png-clipart/20191120/original/pngtree-outline-home-icon-and-symbol-isolated-png-image_5045551.jpg"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <div class="logo"> <img style="width:25px; height:25px" src="https://img.icons8.com/all/500/property.png"> </div> <a class="nav-link" href="#">Property <span class="sr-only">(current)</span></a> </li> </ul> </div>Edit: Just saw someone else answered your question. Glad you got the answer!
