ASP.NET Actionlink with glyphicon and text with different font

Question

I want to present a button with @Html.ActionLink but i need to have my application font in the text.

With this code:

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

I get my button but the Create New text appears with the glyphicon font-family.

Putting the glyphicon classes in the span doesn't change anything

score 149 · Accepted Answer · edited Jul 17 '16 at 21:01

149

You should not add the glyphicon class to the a-tag.

From the Bootstrap website:

Don't mix with other components Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <span> and apply the icon classes to the <span>.

Only for use on empty elements Icon classes should only be used on elements that contain no text content and have no child elements.

In other words the correct HTML for this to work the way you want would be: <a href="#" class="btn btn-warning">test <span class="glyphicon glyphicon-plus-sign"></span></a>

This makes the Html.ActionLink helper unsuitable. Instead you could use something like:

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

edited Jul 17 '16 at 21:01

freedomn-m

27,664
8
35
57

answered Oct 03 '14 at 06:25

Robban

6,729
2
39
47

6

Nice solution, one small comment to avoid browser display problems: use the with a closing tag like this instead of – Pinte Dani Sep 22 '15 at 06:13
5

Don't forget `aria-hidden="true"` on the `span` element. – Fred Nov 18 '15 at 10:54
Lovely answer. I was looking for the `@Url.Action` functionality too, but didn't know how to "search for it".... :) – Shiva Mar 25 '17 at 01:09
but this won't work if you need to pass route value data, right? – Jarrette May 10 '17 at 13:30
3

In fact it does, `Url.Action("Action", "Controller", new { MyRoute="data"})` – Robban May 10 '17 at 14:01

score 23 · Answer 2 · answered Jun 03 '16 at 12:34

23

This works for me in MVC 5:

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

The first parameter cannot be empty or null or it will blow.

answered Jun 03 '16 at 12:34

Norbert Norbertson

2,102
1
16
28

1

Thanks. Worked for me. – Vaibhav Oct 24 '16 at 10:21
This works for an ActionLink that doesn't have text, i.e., a close button, add button, subtract button, etc. Which is exactly what I was looking for. The "accepted" answer is the best way if your button has text. Thank you – Nicholas Jan 12 '17 at 19:53
Even if this works, it doesn't follow the Bootstrap docs, which state that the glyphicon class should not be combined with other classes or elements that contain text. – devlin carnate Mar 30 '17 at 21:37

score 9 · Answer 3 · answered Oct 03 '14 at 06:22

It might be better to just write out the HTML rather than try to make it work with HtmlHelper.ActionLink...

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

score 5 · Answer 4 · answered Apr 21 '16 at 09:55

Here's mine. Inspired by 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));
    }
}

score 2 · Answer 5 · answered Oct 03 '14 at 09:40

2

I should go with the approach of @Url.Action instead of @Html.ActionLink, se example code below:

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

answered Oct 03 '14 at 09:40

Webking

1,822
2
20
28

score 2 · Answer 6 · answered Mar 09 '16 at 06:41

You can use simple extension:

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

Usage:

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

score 2 · Answer 7 · answered Nov 07 '17 at 02:10

2

Try it!

@Html.ActionLink(" Cerrar sesión", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" , @class = "glyphicon glyphicon-log-in" })

answered Nov 07 '17 at 02:10

Charlie

349
4
8

score 0 · Answer 8 · answered Oct 03 '14 at 06:17

Let's have a try on this. Let me know if it is working .Thanks

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

HostMyBus · Answer 9 · 2016-11-14T17:36:04.057

0

How about using Html.BeginForm with a 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>
}

edited Nov 14 '16 at 17:36

answered Nov 14 '16 at 17:23

HostMyBus

195
2
9

score 0 · Answer 10 · answered Mar 30 '18 at 05:35

0

Try this. Worked for me.

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

answered Mar 30 '18 at 05:35

Aayush Rajopadhyaya

103
12

ASP.NET Actionlink with glyphicon and text with different font

10 Answers10

Linked

Related