how to make html.actionlink with an image(add header logo in asp.net MVC 4 project)

Monday

MVC - @Html.ActionLink as a button or an image:
                                     The following sample code used to get Html.ActionLink to render as a button or an image instead of a link. To do this we just apply a CSS class to the htmlAttributes object. The following sample code also used for add/change logo for your asp.net MVC 4 projects.
                       

To change your ASP.NET MVC 4 project logo just open the "_Layout.cshtml" find the following line

<p class="site-title">@Html.ActionLink("*****", "Index", "Home")</p>

and replace with the following line of code

<p>@Html.ActionLink("*****", "Index", null, new { @class = "site-logo" })</p>

and then add the following class in your stylesheet(site.css)

a.site-logo  {     

 background: url(../Images/header-logo.png) no-repeat top left;

 display: block;       

 width: 100px;       

 height: 100px;       

 text-indent: -9999px; /* hides the link text */

  } 

That's it now your header logo act like a image button.

 If this post was help to you. Then Share this to your friends. Thanks!