Replace ImageButton ImageURL with Font Awesome Icon in ASP.Net

Last Reply 18 days ago By dharmendr

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

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


Posted 18 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>