Font awesome inside asp button

Question

This is my asp:button code which is not rendering font awesome's icon but instead shows the HTML as it is:

  <asp:Button runat="server" ID="btnRun" Text="<i class='icon-camera-retro'></i> Search" ValidationGroup="edt" OnClick="btnRun_Click"  CssClass="greenButton"/>

Any idea how can I solve this issue?

Answer 1

You can't with the default asp.net button you will need to use a HTML button and give it runat=server attribute:

<button runat="server" id="btnRun" class="btn btn-mini" title="Search">
    <i class="icon-camera-retro"></i> Search
</button>

So use code behind with this you add:

onserverclick="functionName" 

To the button, then in your C# do:

protected void functionName(object sender, EventArgs e)
{
    Response.Write("Hello World!!!");
}

So final button looks like:

<button runat="server" id="btnRun" onserverclick="functionName" class="btn btn-mini" title="Search">
    <i class="icon-camera-retro"></i> Search
</button>

Answer 2

You can use a LinkButton

<asp:LinkButton runat="server" ID="btnRun" Text="<i class='icon-camera-retro'></i> Search" 
                ValidationGroup="edt" OnClick="btnRun_Click" CssClass="greenButton" />

They do support html in the text field.

Answer 3

You can do it, jut not purely with CSS. You just need to set the Text property on the button to the unicode value of the fontawesome character and give the button the 'fa' css class so it takes up the fontawesome font.

<asp:Button ID="Button1" runat="server" 
    Text="\xF135" CssClass="fa" />

I made this helper library that provides all the icon codes strongly-typed if that turns your crank:

<asp:Button ID="Button1" runat="server" 
    Text="<%# FontAwesome.Icons.Rocket %>" CssClass="fa" />

Nuget: Install-Package FontAwesome-ASP.NET

Source: https://github.com/kemmis/FontAwesome-ASP.NET

Answer 4

Use LinkButton

<asp:LinkButton runat="server" ID="btnRun" ValidationGroup="edt" OnClick="btnRun_Click" CssClass="greenButton" > <i class='icon-camera-retro'></i> Search </asp:LinkButton>

Answer 5

You can also try this solution -

<span  style="position:relative;">
    <i class="fa fa-hand-o-down"></i>
    <asp:Button ID="btnCatMoveDown" CssClass="movedown" CausesValidation="false" Text="" CommandName="categorymovedown" CommandArgument='<%#Eval("SomeId")%>' runat="server"></asp:Button>
</span>

<style>
    .movedown {
        position:absolute;
        opacity:0;
        top:0;
        left:0;
        width:100%;
        height:100%;
    }
</style>

Answer 6

In the others answers changes asp:button by other one, I show you if you want use asp:button, EASY :)

/*CSS*/
/*Colors depends what btn you use, in this case i´m using btn-default*/

.btn_asp_icon{
    border: 0;
    background-color: #fff;
}

.btn:hover > .btn_asp_icon{
    background-color: #e6e6e6;
}

<!-- HTML -->

<div class="btn btn-default">

<i class="fa fa-search fa-fw fa-lg" aria-hidden="true"></i>
<asp:Button cssClass="btn_asp_icon" runat="server" text="Consultar"/>   

</div>

Answer 7

Get it on Nuget!

Install-Package FontAwesome-ASP.NET Usage

FontAwesome Icons In Webforms Buttons

You can use FontAwesome icons inside asp.net webforms button controls. Simply databind to the icon of your choice from the FontAwesome.Icons class' static properties. Then either call DataBind() on your button or DataBind() on your parent control or page.

<asp:Button ID="Button1" runat="server" 
    Text="<%# FontAwesome.Icons.Rocket %>" CssClass="fa" />