Replace ImageButton ImageURL with Font Awesome Icon in ASP.Net

Last Reply 3 months ago By dharmendr

Posted 3 months ago

How to make tick mark and cross mark in asp button?

My question is as imqge is binded in image button how to overlay in image button?

<asp:ImageButton ID="img_ss" ImageUrl="../img/ss_logo.png" OnClick="img_ss_Click" runat="server"   class="fa-shopping-cart" ForeColor=""></asp:ImageButton>
<asp:ImageButton ID="img_sa" ImageUrl="../img/sa_logo.png" runat="server" OnClick="img_sa_Click"></asp:ImageButton>
<asp:Button ID="Button1" runat="server" Text="Search" OnClick="Button1_Click" OnClientClick="img_ss_OnClientClick()"  />

When I click the Button1, the img_ss should be in Font awesome check and img_sa should be font awesome remove using code behind coding

Posted 3 months ago Modified on 3 months ago

Hi SUJAYS,

Check this sample.

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
    rel="stylesheet" type="text/css" />
<asp:ImageButton ID="img_ss" OnClick="img_ss_Click" runat="server" class="fa fa-check">
</asp:ImageButton>

Code

C#

protected void img_ss_Click(object sender, EventArgs e)
{
    if (img_ss.Attributes["class"] == "fa fa-check")
    {
        img_ss.Attributes.Remove("class");
        img_ss.Attributes.Add("class", "fa fa-remove");
    }
    else
    {
        img_ss.Attributes.Remove("class");
        img_ss.Attributes.Add("class", "fa fa-check");
    }
        
}

 VB.Net

Protected Sub img_ss_Click(ByVal sender As Object, ByVal e As EventArgs)
    If img_ss.Attributes("class") = "fa fa-check" Then
        img_ss.Attributes.Remove("class")
        img_ss.Attributes.Add("class", "fa fa-remove")
    Else
        img_ss.Attributes.Remove("class")
        img_ss.Attributes.Add("class", "fa fa-check")
    End If
End Sub

 


Posted 3 months ago

As FontAwesome is a font that requires HTML elements to display, neither asp ImageButton (only allows images) nor asp Button (only allows plain text). It is better to use HtmlButton.

<button runat="server"><i class="fa fa-check"></i></button>