How to add font awesome icon in Custom HTML Helper in ASP.Net MVC 5 application

Question

I want to use font awesome icons in my custom HTML Helper but I am not able to do so.

Below is my attempt:

HTML HELPER

   public static MvcHtmlString MenuLink(this HtmlHelper htmlHelper, string linkText, string actionName, string controllerName, object routeValues, object htmlAttributes)
    {
        var currentAction = htmlHelper.ViewContext.RouteData.GetRequiredString("action");
        var currentController = htmlHelper.ViewContext.RouteData.GetRequiredString("controller");
        var currentArea = htmlHelper.ViewContext.RouteData.DataTokens["area"];

        var builder = new TagBuilder("li")
        {
            InnerHtml = htmlHelper.ActionLink(linkText, actionName, controllerName, routeValues, htmlAttributes).ToHtmlString()
        };
        if (String.Equals(controllerName, currentController, StringComparison.CurrentCultureIgnoreCase) && String.Equals(actionName, currentAction, StringComparison.CurrentCultureIgnoreCase))
            builder.AddCssClass("active");
        //builder.AddCssClass("btn");

        return new MvcHtmlString(builder.ToString());
    }
}

Custom Action Link

     @Html.MenuLink("Resume Center", "Index", "Resume", null, new { @class = "btn btn-block"})

I modified above link but it does not work as expected. Non working example below.

 @Html.MenuLink("<i class='fa fa - file'></i> Resume Center", "Index", "Resume", null, new { @class = "btn btn-block"})

Original HTML the gets rendered by Custom Helper:

<li class="active">
    <a class="btn btn-block" href="/Resume">Resume Center</a>
</li>

I want something like

<li class="active">
    <a class="btn btn-block" href="/Resume">
        <i class="fa fa-file"></i>Resume Center
    </a>
</li>

Please help me.

Answer 1

ActionLink() only generates an <a> tag. You will need to replace InnerHtml = htmlHelper.ActionLink(...) with your own code to manually build the html.

    public static MvcHtmlString MenuLink(this HtmlHelper htmlHelper, string linkText, string actionName, string controllerName, object routeValues, object htmlAttributes)
    {
        var currentAction = htmlHelper.ViewContext.RouteData.GetRequiredString("action");
        var currentController = htmlHelper.ViewContext.RouteData.GetRequiredString("controller");
        var currentArea = htmlHelper.ViewContext.RouteData.DataTokens["area"];
        // Build the icon and display text elements
        StringBuilder innerHtml = new StringBuilder();
        TagBuilder icon = new TagBuilder("i");
        icon.AddCssClass("fa fa-file");
        innerHtml.Append(icon.ToString());
        TagBuilder span = new TagBuilder("span");
        span.InnerHtml = linkText;
        innerHtml.Append(span.ToString());
        // Build the link
        TagBuilder link = new TagBuilder("a");
        UrlHelper urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext);
        string url = urlHelper.Action(actionName, controllerName, routeValues);
        link.MergeAttribute("href", url);
        link.MergeAttributes(new RouteValueDictionary(htmlAttributes));
        link.InnerHtml = innerHtml.ToString();
        // Build the li element
        TagBuilder li = new TagBuilder("li");
        li.InnerHtml = link.ToString();
        if (String.Equals(controllerName, currentController, StringComparison.CurrentCultureIgnoreCase) && String.Equals(actionName, currentAction, StringComparison.CurrentCultureIgnoreCase))
        {
            li.AddCssClass("active");
        }
        // Return the html
        return new MvcHtmlString(li.ToString());
    }
}