how to insert fontawesome icon in ajax.actionlink - ajax

Question

Is it possible to add icon tag to the ajax.actionlink?
#Ajax.ActionLink("Subscribe", "Subscribe", "UserManagement", new { id = ViewBag.UserId },
new AjaxOptions
{
UpdateTargetId = "video-userinfo-subscribe",
HttpMethod = "POST",
InsertionMode = InsertionMode.Replace
}, new { id = "video-userinfo-subscribe" })

Answer 1

Short answer, you can't, or at least, it's inadvisable. As you detailed in your comment on #Shyju's answer, applying a class to the a tag will have unintended side effects. Font Awesome is designed to be applied to an empty inline element, i.e.:
<i class="fa fa-foo"></i>
The longer answer is to simply not use Html.ActionLink or Ajax.ActionLink. It's just a shortcut for when you need a simple link, simple being the keyword. As soon as you want to do something like add an icon, you're out of that territory. Instead do something like:
<a id="video-userinfo-subscribe" href="#Url.Action("Subscribe", "UserManagement", new { id = ViewBag.UserId })">
<i class="fa fa-foo"></i>
Subscribe
</a>
But, what about your AJAX? Well, here again is one more reason in a long line of reasons to not use the Ajax.* family of helpers. They're stupidly inflexible and brittle. You're always going to be much better off applying your own JavaScript than relying on the Web Form-era holdovers.
$('#video-userinfo-subscribe').on('click', function (e) {
e.preventDefault();
var url = $(this).attr('href');
$.post(url, function (html) {
$('#video-userinfo-subscribe').replaceWith(html);
});
});
Be careful with this kind of thing, though. You're replacing the same element you're binding to, so you should either:
Bind to a delegate (i.e. a parent of the a tag):
$('#parentElement').on('click', '#video-userinfo-subscribe', function (e) {
replace some other element or simply the content of the a tag:
$('#video-userinfo-subscribe').html(html);

Answer 2

Yes, its possible with a trick. Try like this:
#Ajax.ActionLink("YourText", "YourAction", "YourController", null, new AjaxOptions { HttpMethod = "GET", InsertionMode = InsertionMode.Replace, UpdateTargetId = "YourDivTargetToUpdate" }, new { #class = "btn btn-success", #id="myActionLinkId" })
<script>$("#myActionLinkId").prepend("<i class='fa fa-plus'></i> ");</script>
Just, replace for your own variables.

Answer 3

I know this must be old but this might help other
<div class="col-2 text-center">
<a data-ajax="true"
data-ajax-loading="#loading"
data-ajax-mode="replace"
data-ajax-update="#editBid"
href="/Bids/_EditBid/?bidId=#Model.BidId"
class="btn btn-sample"><i class="fas fa-edit fa-lg"></i></a>

Answer 4

I like the answer by Erik VzGz. It is simple and easy to implement. However, I had to change it to be based on class rather than id because I wanted to use it in a table where each row had the links.
#Ajax.ActionLink("YourText", "YourAction", "YourController", null, new AjaxOptions { HttpMethod = "GET", InsertionMode = InsertionMode.Replace, UpdateTargetId = "YourDivTargetToUpdate" }, new { #class = "btn btn-success myActionLink" })
<script>
$('.myActionLink').prepend("<i class='fa fa-plus'></i> ");
</script>
Also, if you don't want any text on the button, change "YourText" to " ". You have to have at least one character or it will give an error.