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

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" />

Answer 2

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 3

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 4

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 5

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 6

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