Font awesome inside asp button

问题

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?

回答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>

回答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.

回答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

回答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>

回答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>

回答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>

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

来源：https://stackoverflow.com/questions/15064005/font-awesome-inside-asp-button

标签

ASP.NET

.net

asp.net-4.0