ASP.NET Actionlink with glyphicon and text with different font

asp.net MvcTwitter BootstrapRazorGlyphicons

asp.net Mvc Problem Overview


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

asp.net Mvc Solutions


Solution 1 - asp.net Mvc

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>

Solution 2 - asp.net Mvc

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.

Solution 3 - asp.net Mvc

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>

Solution 4 - asp.net Mvc

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

Solution 5 - asp.net Mvc

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>

Solution 6 - asp.net Mvc

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

Solution 7 - asp.net Mvc

Try it!

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

Solution 8 - asp.net Mvc

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>

Solution 9 - asp.net Mvc

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

Solution 10 - asp.net Mvc

Try this. Worked for me.

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questione4rthdogView Question on Stackoverflow
Solution 1 - asp.net MvcRobbanView Answer on Stackoverflow
Solution 2 - asp.net MvcNorbert NorbertsonView Answer on Stackoverflow
Solution 3 - asp.net MvcAnthony ChuView Answer on Stackoverflow
Solution 4 - asp.net MvcBen HaleView Answer on Stackoverflow
Solution 5 - asp.net MvcWebkingView Answer on Stackoverflow
Solution 6 - asp.net MvcAndrey BurykinView Answer on Stackoverflow
Solution 7 - asp.net MvcCharlieView Answer on Stackoverflow
Solution 8 - asp.net MvcHatjhieView Answer on Stackoverflow
Solution 9 - asp.net MvcHostMyBusView Answer on Stackoverflow
Solution 10 - asp.net MvcAayush RajopadhyayaView Answer on Stackoverflow