How to replace actionlink text with a glyphicon in @Html.ActionLink?

Question

I want to replace X with glyphicon-trash.

I am using X as a linktext.Which works for deleting an item.How to replace with a glyphicon.

Here is my code

 @Html.ActionLink(
                     "X",
                     "Delete",
                     "Grocery",
                     new { GroceryUsageID = item.GroceryUsageID, GroceryId = item.GroceryID },
                     new { @onclick = "return confirm('Are you sure you want to delete this Grocery');"})

Can you describe your question little more in detailed? When you want to replace the text? If you want to replace, then have you tried with JQuery on client side? — ramiramilu, Jan 05 '16 at 05:44
Possible duplicate of [ASP.NET Actionlink with glyphicon and text with different font](http://stackoverflow.com/questions/26174013/asp-net-actionlink-with-glyphicon-and-text-with-different-font) — ramiramilu, Jan 05 '16 at 05:49

score 9 · Accepted Answer · answered Jan 05 '16 at 10:49

You can do it like following. Just add @class = "glyphicon glyphicon-trash" in htmlAttributes parameter and replace X with a space.

 @Html.ActionLink(
        " ",
        "Delete",
        "Grocery",
        new { GroceryUsageID = item.GroceryUsageID, GroceryId = item.GroceryID },
        new { @onclick = "return confirm('Are you sure you want to delete this Grocery');", 
              @class = "glyphicon glyphicon-trash" })

score 2 · Answer 2 · edited May 23 '17 at 12:02

2

Try this. Copied from here ;)

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

edited May 23 '17 at 12:02

Community

1
1

answered Jan 05 '16 at 05:45

Nitin Varpe

10,450
6
36
60

I do not believe class="btn btn-warning" is necessary as glypicon-plus-sign is used for displaying + sign. – AbuTaareq Aug 05 '17 at 21:20

Mike · Answer 3 · 2017-09-06T23:49:49.473

This is my implementation for easier re-use

Helper Method Extension class

namespace Extensions {
using System;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Html;
    public static class HtmlExtensions {
        public static MvcHtmlString FALink(this HtmlHelper htmlHelper, string action, string controller, string link_text, string fa_class, string btn_css_classes = "", string button_id = "", object route_values = null) {
                // declare the span                 
                TagBuilder span = new TagBuilder("span");
                span.AddCssClass($"fa fa-{fa_class}");
                span.MergeAttribute("aria-hidden", "true");         

                // declare the anchor tag
                TagBuilder anchor = new TagBuilder("a");
                // Add the href attribute to the <a> element
                if (string.IsNullOrEmpty(controller) || string.IsNullOrEmpty(action))
                    anchor.MergeAttribute("href", "#");
                else         
                    anchor.MergeAttribute("href", new UrlHelper(HttpContext.Current.Request.RequestContext).Action(action, controller, route_values));

                // Add the <span> element and the text to the <a> element
                anchor.InnerHtml = $"{span} {link_text}";
                anchor.AddCssClass(btn_css_classes);
                anchor.GenerateId(button_id);
                // Create the helper
                return MvcHtmlString.Create(anchor.ToString(TagRenderMode.Normal));    
        }
    }
}

Make sure you include the namespace in the View so method is available

Example usages in Razor View You can pass any route values you desire like any stock @Html helper using commas to separate values

using all parms:

@Html.FALink("ActionNameHere", "ControllerNameHere", "Back to List", "th-list", "btn btn-info", "btn_back_to_list", new {area="AreaNameHere"})

basic link type button:

@Html.FALink("ActionNameHere", "ControllerNameHere", "Back to List, "th-list")

basic link type button using bootstrap to color text

@Html.FALink("ActionNameHere", "ControllerNameHere", "Back to List", "th-list, "btn-info")

While I use Font Awesome you could easily replace fa with bootstraps glyphicon class to use the bootstrap glyphicons
If no controller or Action is passed in, it uses # as the link location so it will play nice with drop down interaction

How to replace actionlink text with a glyphicon in @Html.ActionLink?

3 Answers3