ASP.NET Actionlink与glyphicon和不同字体的文本

e4r*_*dog 60 asp.net-mvc razor twitter-bootstrap glyphicons

我想要一个按钮,@Html.ActionLink但我需要在文本中使用我的应用程序字体.

使用此代码:

<span>
    @Html.ActionLink("  Create New", "Create", null, new { @class = "btn btn-warning glyphicon glyphicon-plus-sign" })
</span>
Run Code Online (Sandbox Code Playgroud)

我得到了我的按钮,但是创建新文本显示为glyphicon font-family.

将glyphicon类放在span中不会改变任何东西

Rob*_*ban 142

您不应该将glyphicon类添加到a-tag.

从Bootstrap网站:

不要与其他组件混合使用 图标类不能直接与其他组件组合.它们不应与同一元素上的其他类一起使用.相反,添加嵌套<span>并将图标类应用于<span>.

仅用于空元素 图标类应仅用于不包含文本内容且没有子元素的元素.

换句话说,正确的HTML可以按照您想要的方式工作: <a href="#" class="btn btn-warning">test <span class="glyphicon glyphicon-plus-sign"></span></a>

这使Html.ActionLink助手不合适.相反,你可以使用类似的东西:

<a href="@Url.Action("Action", "Controller")" class="btn btn-warning">
    link text 
    <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
</a>
Run Code Online (Sandbox Code Playgroud)

  • 很好的解决方案,一个小注释,以避免浏览器显示问题:使用<span>与结束标记,如<span> </ span>而不是<span /> (6认同)
  • 不要忘记`span`元素上的'aria-hidden ="true"`. (5认同)
  • 实际上它确实如此,`Url.Action("Action","Controller",new {MyRoute ="data"})` (3认同)

Nor*_*son 22

这适用于MVC 5:

@Html.ActionLink(" ", "EditResources", "NicheSites", new { ViewBag.dbc, item.locale, ViewBag.domainId, domainName = ViewBag.domaiName }, new {@class= "glyphicon glyphicon-edit" })
Run Code Online (Sandbox Code Playgroud)

第一个参数不能为空或为null,否则会打击.


Ant*_*Chu 9

最好只写出HTML而不是尝试使用它HtmlHelper.ActionLink...

<span>
    <a href="@Url.Action("Create")" class="btn btn-warning">
        <span class="glyphicon glyphicon-plus-sign"></span>
        Create New
    </a>
</span>
Run Code Online (Sandbox Code Playgroud)


小智 5

这是我的.灵感来自Andrey Burykin

public static class BensHtmlHelpers
{
    public static MvcHtmlString IconLink(this HtmlHelper htmlHelper, string linkText, string actionName, object routeValues, String iconName, object htmlAttributes = null)
    {
        var linkMarkup = htmlHelper.ActionLink(linkText, actionName, routeValues, htmlAttributes).ToHtmlString();
        var iconMarkup = String.Format("<span class=\"{0}\" aria-hidden=\"true\"></span>", iconName);
        return new MvcHtmlString(linkMarkup.Insert(linkMarkup.IndexOf(@"</a>"), iconMarkup));
    }
}
Run Code Online (Sandbox Code Playgroud)