46

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?

Jack
  • 7,433
  • 22
  • 63
  • 107
  • 1
    Have you actually looked at the rendered HTML? Can you see where the value of `Text` is placed? – freefaller Feb 25 '13 at 09:43
  • yes, it is placed inside value attribute of input type text. – Jack Feb 25 '13 at 09:45
  • Correct, and therefore HTML is not going to be parsed **within** that attribute – freefaller Feb 25 '13 at 09:45
  • @freefaller: Please read Ryan's answer. – Jack Feb 25 '13 at 13:03
  • OK, I have read it - and I can't see anything that would make me change my comments. I can't see him trying to put HTML into an attribute – freefaller Feb 25 '13 at 13:55
  • 1
    Right. I meant you should read how to solve this issue. I didn't expect an obvious comment of "look HTML rendered". I already knew that and hence "shows the HTML as it is" in my question. My question was how to solve the issue and hence "Any idea how can I solve this issue?" in my question at the end. Hope you get the idea about the question and it's solution. – Jack Feb 25 '13 at 14:18

10 Answers10

76

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>
Ryan McDonough
  • 9,732
  • 3
  • 55
  • 76
  • Great but that brings in bigger problems. How do I now handle server side click event of button? Write manual __doPostBack? – Jack Feb 25 '13 at 09:52
  • 1
    @Jack, You can do with existing button itself. I added display:none to hide and i click when the user click button using javascript. Check my answer – Murali Murugesan Feb 25 '13 at 09:56
  • If you need just an icon without text, Rafe's solution (below) is easier to handle because it does not require to change any code in code behind. Otherwise I would recommend to use a LinkButton and only if this is not an option, I would use Ryan's solution. – Tillito Aug 20 '15 at 15:27
42

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.

Adam
  • 16,089
  • 6
  • 66
  • 109
17

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

Rafe
  • 8,467
  • 8
  • 47
  • 67
  • 7
    Tried this approach. The button just rendered the text "\xF135" instead of the icon. I had to use code  from http://fortawesome.github.io/Font-Awesome/cheatsheet/ – Tomas Beblar Jun 24 '15 at 19:54
  • 2
    Mind that when you use also text next to the icon it will also be of the awesome font - which looks ugly. So this approach is the best when you have just an icon to display. – Tillito Aug 20 '15 at 16:56
  • 1
    @Tillito I was able to get around this over here by wrapping the control sequences in inner tags same as the FA guidelines: – mjw Oct 21 '15 at 18:46
  • @mjw: you are right. See Ryan McDonough's answer which I marked as the solution. – Tillito Oct 27 '15 at 14:27
  • This should be the answer. It's the easiest solution. – Zachary Weber Feb 08 '19 at 15:42
11

Use LinkButton

<asp:LinkButton runat="server" ID="btnRun" ValidationGroup="edt" OnClick="btnRun_Click" CssClass="greenButton" > <i class='icon-camera-retro'></i> Search </asp:LinkButton>
nazmul.3026
  • 918
  • 1
  • 9
  • 20
  • The problem is that there are several reasons why one might not be able to use a link button (since that converts to a link instead of actually being a button) which can break what the someone is trying to accomplish. Certain bootstrap behaviors are broken by trying to use a link button instead of an asp:Button – Musical Coder Jan 21 '19 at 19:59
3

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>
drneel
  • 2,887
  • 5
  • 30
  • 48
Raj Kiran Singh
  • 31
  • 2
1

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>
ShisellM
  • 11
  • 1
0

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" />
amir ameri
  • 11
  • 3
0

Put this in your Load form method:

btn_Test.Text = "Hello " + FontAwesome.Icons.LongArrowRight;

And the CssClass button:

CssClass="fa"

Grigory Zhadko
  • 1,484
  • 1
  • 19
  • 33
Javier Gutierrez
  • 1
0

This code worked for me for v5.15

I had to add the following files to a folder named fonts under wwwroot

  1. FontAwesome.otf
  2. fontawesome-webfront.eot
  3. fontawesome-webfront.svg
  4. fontawesome-webfront.ttf
  5. fontawesome-webfront.woff
  6. fontawesome-webfront.woff2

<div>
    <a asp-controller="Controller" asp-action="CSHTMLFILE"><i class="fa fa-1x fa-arrow-left "></i> Go Back to Previous Page</a>  
</div>
Emerald T
  • 11
  • 1
0

function redirectToButton(buttonId) {
  document.getElementById(buttonId).click();
}
.btnHidden {
  background: none;
  color: white;
  padding: 0rem;
  border: none;
}
<div class="btn btn-primary" onclick="redirectToButton('<%= btnSearch.ClientID %>')">
    <i class="fa fa-search fa-fw fa-lg" aria-hidden="true"></i>
    <asp:Button runat="server" ClientIDMode="Static" CssClass="btnHidden" ID="btnSearch" Font-Bold="true" Text="Search" />
</div>
Pablo Bonfante
  • 1
  • 1