Image on ActionLink with Twitter Bootstrap - css

Question

I have a button at the moment, rendered in my MVC application as:
#Html.ActionLink("Delete", "DeleteTransfer", "Transaction", new { transferId = (Model.Id) }, new { #class = "btn btn-danger", #onclick = "return confirm('Are you sure you want to delete this Transfer?')" })
I want to use the Twitter Bootstrap classes to add an icon. However, for that the code would look like this:
<button class="btn btn-danger"><i class="icon-white icon-trash"></i> Delete</button>
How can I apply this in my ActionLink? It has an Image (i) embedded in the button.

Answer 1

Try:
<a class="btn btn-danger"
href="#Url.Action("DeleteTransfer", "Transaction", new { transferId = (Model.Id) })"
onclick = "return confirm('Are you sure you want to delete this Transfer?');"
>
<i class="icon-white icon-trash">Delete</i>
</a>
According your routes, it's possible you need:
#Url.Action("DeleteTransfer", "Transaction", new { transferId = (Model.Id) }, null)

Answer 2

According to the bootstrap documentation (http://getbootstrap.com/components/#glyphicons-examples) glyphicons might be the way to go. Here is an example of putting an icon on a button:
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Star
</button>
Since ActionLink() is an htmlHelper extension that returns an "a" element, i.e., <a>...</a>, I believe the extension needs to be overridden.
I tried the following, but it resulted in the glyphicon being above the "a" element:
<span class="glyphicon glyphicon-star"></span>#Html.ActionLink("Delete", "DeleteTransfer")
I also tried putting the ActionLink() inside the <span></span> with the same results. I tried using css with text-wrap: none; and white-space: nowrap; but that didn't work either.
So I believe the answer is the extension needs to be overridden to accept another parameter for the glyphicon. Unless, someone can show a trick to make it stop wrapping.