MVC Bootstrap 字形图标和导航栏

Question

我正在尝试在 "Shop" ActionLink 附近获得一个购物字形，这就是我得到的：

我希望主页图标位于 "Shop" 之前并在同一行中。我正在使用 MVC5 .cshtml 文件

这是代码：

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">

            @* Glasses Menu *@
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Glasses <span class="caret"></span></a>
                <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><a href="#">Separated link</a></li>*@
                </ul>
            </li>

            @* SDK's Menu *@
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Developers <span class="caret"></span></a>
                <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>
                <a href="@Html.ActionLink("Shop", "Shop", "Glasses")"><span class="glyphicon glyphicon-home" /></a>
            </li>
            <li>@Html.ActionLink("About", "About", "Home")</li>
            <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
        </ul>
        @Html.Partial("_LoginPartial")
    </div>

Answer 1

我认为您混淆了 HTML.ActionLink() 的作用。它生成带有标签的锚 link。因此，如果您检查此行生成的 HTML 代码：

@Html.ActionLink("Shop", "Shop", "Glasses")

它会产生这样的东西：

<a href="glasses/shop">Shop</a>

您的代码将产生如下内容：

<a href="<a href="glasses/shop">Shop</a>"><span class="glyphicon glyphicon-home" /></a>

您想使用 URL.Action() 助手：

<a href="@Url.Action("Shop", "Glasses")"><span class="glyphicon glyphicon-home"></span> Shop</a>

MVC Bootstrap 字形图标和导航栏

MVC Bootstrap glyphcon and navbar

asp.net-mvc

razor

twitter-bootstrap