ASP.NET中的Actionlink如何用不同字体呈现带有glyphicon和文本的内容

Question

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

使用以下代码：

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

我得到了我的按钮，但是创建新文本显示为glyphicon字体族。

将glyphicon类放在span中并没有改变任何内容。

- e4rthdog

Answer 1

不应将glyphicon类添加到a标签中。

来自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>

- Robban

---

好的解决方案，为避免浏览器显示问题，建议使用带有闭合标签的<span>，像这样：<span></span>，而不是<span />。 - Pinte Dani

不要忘记在span元素上加上aria-hidden="true"。 - Fred

很好的答案。我也在寻找@Url.Action功能，但不知道该如何“搜索它”.... :) - Shiva

但是如果您需要传递路由值数据，这种方法就不起作用了，对吧？ - Jarrette

实际上，它是这样的：Url.Action("Action", "Controller", new { MyRoute="data"})。 - Robban

Answer 2

这对于我在MVC 5中有效：

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

第一个参数不能为空或为null，否则会出问题。

- Norbert Norbertson

---

谢谢。对我有用。 - Vaibhav

这适用于没有文本的ActionLink，例如关闭按钮、添加按钮、减少按钮等。这正是我要找的。如果您的按钮有文本，那么“已接受”的答案是最好的方法。谢谢 - Nicholas

即使这样可以工作，也不遵循Bootstrap文档，该文档指出glyphicon类不应与包含文本的其他类或元素组合使用。 - devlin carnate

Answer 3

与其试图通过 HtmlHelper.ActionLink 来使其正常工作，不如直接编写 HTML 可能更好...

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

- Anthony Chu

Answer 4

这是我的作品。受安德烈·布里金的启发。

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));
    }
}

- Ben Hale

Answer 5

您可以使用简单的扩展程序：

private static readonly String SPAN_FORMAT = "<span class=\"{0}\" aria-hidden=\"true\"></span>";
private static readonly String A_END = "</a>";
public static MvcHtmlString ActionLink(this HtmlHelper htmlHelper, string linkText, string actionName, object routeValues, String iconName, object htmlAttributes = null)
{
    var linkMarkup = htmlHelper.ActionLink(linkText, actionName, routeValues, htmlAttributes).ToHtmlString();
    if (!linkMarkup.EndsWith(A_END))
        throw new ArgumentException();

    var iconMarkup = String.Format(SPAN_FORMAT, iconName);
    return new MvcHtmlString(linkMarkup.Insert(linkMarkup.Length - A_END.Length, iconMarkup));
}

使用方法：

Html.ActionLink(" ", "DeleteChart", new { Id = _.Id }, "glyphicon glyphicon-trash")

- Andrey Burykin

Answer 6

试一试！

@Html.ActionLink("退出登录", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" , @class = "glyphicon glyphicon-log-in" })

- Charlie

Answer 7

我应该采用@Url.Action的方法而不是@Html.ActionLink，请参见下面的示例代码：

<span>
<a href="@Url.Action("Create", new { @class = "btn btn-warning" })"><span class="glyphicon glyphicon-plus-sign"></span> Create New</a>
</span>

- Webking

Answer 8

试试这个。对我有用。

<button class="btn btn-primary"><i class ="fa fa-plus">@Html.ActionLink(" ", "Create", "Home")</i></button>

- Aayush Rajopadhyaya

Answer 9

我们来试一下这个。如果可以工作请告诉我。谢谢。

<style>
   span.super a
  {
      font: (your application font) !important;
  }

</style>

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

- Hatjhie

Answer 10

使用Html.BeginForm和FormMethod.Get / FormMethod.Post如何？

@using (Html.BeginForm("Action", "Controller", new { Area = "" },
FormMethod.Get, htmlAttributes: new { title = "SomeTitle" }))
{   
   <button type="submit" class="btn-link" role="menuitem">
   <i class="glyphicon glyphicon-plus-sign"></i>Create New</button>
}

- HostMyBus