Insert Glyphicons bootstrap in @Html.ActionLink mvc asp.net

Question

Would enter Glyphicons Boostrap instead of "Edit" in the code below. Could you give me an example to do.

@Html.ActionLink("Edit", "Edit", new { id = Model.id_rod }) |

To bring up the image instead of writing.

See this: http://stackoverflow.com/questions/26174013/asp-net-actionlink-with-glyphicon-and-text-with-different-font — Petr, May 06 '15 at 12:37

score 29 · Accepted Answer · answered Apr 13 '14 at 23:04

29

If using Bootstrap 3:

<a href="@Url.Action("Edit", new { id = Model.id_rod })">
    <i class="glyphicon glyphicon-pencil"></i>
    <span class="sr-only">Edit</span>
</a>

Note the use of sr-only will allow users of screen readers and search engines to know what the link is for.

answered Apr 13 '14 at 23:04

Jeremy Cook

20,840
9
71
77

How to display "Edit" when mousing over – rysahara Apr 13 '14 at 23:20
1

You could create a CSS `:hover` rule that targets a specific class. That class could be named `show-on-hover` and then add it to the `span` element, or simply add a `title="Edit"` attribute to the `a` element. – Jeremy Cook Apr 13 '14 at 23:27

score 0 · Answer 2 · answered Sep 06 '17 at 21:03

I made helper for easier re-use

Helper Method Extension class

namespace Extensions {
    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 for the glyphicon                
                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 usage in Razor View (Leave area empty string if your not using areas)

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

While I use Font Awesome you could easily replace fa with 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

Insert Glyphicons bootstrap in @Html.ActionLink mvc asp.net

2 Answers2

Linked