MVC Bootstrap glyphcon and navbar - asp.net-mvc

Question

I am trying to get a Shopping glyphcon near the "Shop" ActionLink, and this is what I get:
I want the home icon to be before the "Shop" and in the same line.
I'm using MVC5 .cshtml file
This is the Code:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
#* Glasses Menu *#
<li class="dropdown">
Glasses <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>#Html.ActionLink("InfinityAR", "InfinityAR", "Glasses")</li>
<li>#Html.ActionLink("Google Glass", "GoogleGlass", "Glasses")</li>
#*<li class="divider"></li> //TODO: Enter here something
<li>Separated link</li>*#
</ul>
</li>
#* SDK's Menu *#
<li class="dropdown">
Developers <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li style="margin-left:10px">SDK</li>
<li class="divider"></li>
<li>#Html.ActionLink("METAIO", "Metaio", "Developers")</li>
</ul>
</li>
<li>
<span class="glyphicon glyphicon-home" />
</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
#Html.Partial("_LoginPartial")
</div>

Answer 1

I think you've confused what HTML.ActionLink() does. It generates the anchor link with tags.
So if you inspect the generated HTML code of this line:
#Html.ActionLink("Shop", "Shop", "Glasses")
It will produce something like this:
Shop
Your code will produce something like this:
Shop"><span class="glyphicon glyphicon-home" /></a>
You want to use the URL.Action() helper:
<span class="glyphicon glyphicon-home"></span> Shop