Replace ImageButton ImageURL with Font Awesome Icon in ASP.Net

Last Reply 19 days ago By dharmendr

Posted 19 days 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 19 days ago Modified on 19 days 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 19 days 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>