ASP.NET Actionlink with glyphicon and text with different font
Solution 1
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
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
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
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
Try it!
@Html.ActionLink(" Cerrar sesión", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" , @class = "glyphicon glyphicon-log-in" })
e4rthdog
Updated on March 30, 2020Comments
-
e4rthdog about 4 years
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
-
Pinte Dani almost 9 yearsNice solution, one small comment to avoid browser display problems: use the <span> with a closing tag like this <span></span> instead of <span />
-
Fred over 8 yearsDon't forget
aria-hidden="true"
on thespan
element. -
Razor over 7 yearsThis saved my life. Thank you!
-
Vaibhav over 7 yearsThanks. Worked for me.
-
Nicholas over 7 yearsThis 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
-
Shiva over 7 yearsLovely answer. I was looking for the
@Url.Action
functionality too, but didn't know how to "search for it".... :) -
devlin carnate about 7 yearsEven 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.
-
Jarrette about 7 yearsbut this won't work if you need to pass route value data, right?
-
Robban about 7 yearsIn fact it does,
Url.Action("Action", "Controller", new { MyRoute="data"})