c# - Fuente impresionante dentro del botón asp

asp.net .net

Question

Este es el código de mi botón de asp: que no muestra el icono de fuente impresionante, sino que muestra el HTML tal como está:

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

¿Alguna idea de cómo puedo resolver este problema?

Answer 1

¡Consíguelo en Nuget!

Install-Package FontAwesome-ASP.NET Usage

Iconos de FontAwesome en botones de formularios web

Puede usar los iconos de FontAwesome dentro de los controles de botones de formularios web de asp.net. Simplemente vincule el icono de su elección con las propiedades estáticas de la clase FontAwesome.Icons. Luego llame a DataBind () en su botón o a DataBind () en su control o página principal.

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

Answer 2

En las otras respuestas, el botón asp: button por el otro, te muestro si quieres usar el botón asp: 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 3

No puede con el botón asp.net predeterminado, necesitará usar un botón HTML y asignarle el atributo runat = server:

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

Así que usa el código detrás con esto agregas:

onserverclick="functionName" 

Al botón, luego en tu C # haz:

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

Así que el botón final se ve como:

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

Answer 4

Puedes hacerlo, pero no solo con CSS. Solo debe configurar la propiedad de Texto en el botón al valor Unicode del carácter fontawesome y darle al botón la clase css ''fa'' para que ocupe la fuente impresionante.

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

Hice esta biblioteca de ayuda que proporciona todos los códigos de íconos fuertemente tipados si eso hace girar tu manivela:

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

Nuget: Install-Package FontAwesome-ASP.NET

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

Answer 5

Puedes usar un LinkButton

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

Ellos soportan html en el campo de texto.

Answer 6

También puedes probar esta solución -

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

Use LinkButton

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