Put a logo with @Html.ActionLink

Question

If you use ASP.NET MVC 4 template to generate a default web project, you will find the code.

<body>
    <header>
        <div class="content-wrapper">
            <div class="float-left">
                <p class="site-title">@Html.ActionLink("your logo", "Index", "Home")</p>
            </div>

Now I have an existing image "logo.jpg", I want to insert it in the linktext position, how to?

Have you checked [this](http://stackoverflow.com/questions/596444/html-actionlink-as-a-button-or-an-image-not-a-link)? — rikitikitik, Jun 07 '13 at 01:13

score 1 · Accepted Answer · answered Jun 07 '13 at 01:15

1

It's a bit misleading, since you can't do this directly.

As rikitikitik's link suggests, one thing you can do is keep the ActionLink as is, but give it a class and then apply CSS rules to turn the link into an image.

Alternatively you can just use your own HTML <img> tag or write your own HTML helper to generate image-link combinations.

answered Jun 07 '13 at 01:15

Rowan Freeman

15,724
11
69
100

So you mean Microsoft should improve it for confusion? – Jun 07 '13 at 01:18
1

I'd say they should improve it for clarification ;) – Rowan Freeman Jun 07 '13 at 01:19
I dunno, IMHO the confusion needs to be improved as well. ;-) – BrainSlugs83 Jun 15 '13 at 06:10

score 0 · Answer 2 · answered Aug 26 '14 at 18:45

I just wanted to display an Image and there was no use of link for me. This is what i did:

Totally removed the @Html.ActionLink and simply used the <p> as a place holder so that my existing css can bind to it properly:

<div class="float-left">    
    <p class="site-title" ></p>
</div>

Now I opened my site.css and replaced the css for site-title as:

/* site title
----------------------------------------------------------*/
.site-title {
    color: #c8c8c8;
    font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
    font-size: 2.3em;
    margin: 0;

    background: url("../images/logo.png") no-repeat center left; 
    display: block;
    height: 84px; 
    width: 512px;
}

Note that i have to use ../images instead of ~/images

Also i simply deleted more css in same site.css for .site-title a, .site-title a:hover, .site-title a:active

It's totally up to you if you want to keep additional css for additional actions.

Thanks and Regards
Anugrah

Put a logo with @Html.ActionLink

2 Answers2