How do you create a BMVC (TwitterBootstrapMVC) link with an image?

Question

Is there a way to do this using BMVC (aka TwitterBootstrapMVC5)?

Example Razor page below:

@{
    var alt = "microsoft homepage";    
    var url = "http://www.microsoft.com/";
    var logo = "~/Content/Images/microsoft_logo.png";
}

<!-- The old school way works just fine; also not using any variables -->
<a href="http://www.microsoft.com/">
    <img alt="microsoft homepage" src="~/Content/Images/microsoft_logo.png" />
</a>

<!-- This does not work using BMVC (the link works but fails at rendering the logo and has no alternate text) -->
@Html.Bootstrap().Link(@logo, @url)

In other words, is there a “short and sweet” way to create a link (with an image) using BMVC?

Answer 1

Gee wiz, it was a pretty simple solution as soon as I looked at it again.

@{
    // Note, the necessary absence of the "~" tilde in the src attribute below.
    var img = "<img alt='microsoft homepage' src='/Content/Images/microsoft_logo.png'/>";
    var url = "http://www.microsoft.com/";
}

<!-- The simple solution! -->    
@Html.Bootstrap().Link(@img, @url)

On a side note, would it be nice if BMCV had built-in ImageLink and ImageActionLink?

Answer 2

https://www.twitterbootstrapmvc.com/Documentation#buttons-link Enh?

I understand this is just a link, but the documentation should be sufficient

@Html.Bootstrap().Link("awesome website", "http://www.website.net")

Html

<a href="http://www.website.net">awesome website</a>

, - . , ?

@Html.Bootstrap().Link("<img src=\"@logo\"/>", "http://www.website.net")

?

Answer 3

If you use FontAwesome or another icon library, then you can do things like this:

@Html.Bootstrap().Link("<span class='icon fa fa-globe'></span> Globe", url)