html - Bootstrap. Get icon next to li navbar -

i using navbar:

<nav class="navbar navbar-default">   <div class="container-fluid">     <div class="navbar-header">       <a class="navbar-brand" href="#">websitename</a>     </div>     <div>       <ul class="nav navbar-nav">         <li class="active"><a href="#">home</a></li>         <li><a href="#">page 1</a></li>         <li><a href="#">page 2</a></li>         <li><a href="#">page 3</a></li>       </ul>     </div>   </div> </nav> 

i i'm trying place "home" icon next word "home" , place in same grey block, doing this:

<li class="active"><a href="main.php">home</a><i class='glyphicon glyphicon-home'></i></li> 

i have tried place in several places without success.

thank in advance.

why not inside anchor tag ?

<li class="active">   <a href="main.php">home<i class='glyphicon glyphicon-home'></i></a> </li> 

demo: http://jsfiddle.net/dhirajbodicherla/urnb1wha/

if want home icon towards extreme right use pull-right class glyphicon

<li class="active">   <a href="main.php">home<i class='pull-right glyphicon glyphicon-home'></i></a> </li> 

demo : http://jsfiddle.net/dhirajbodicherla/urnb1wha/1/