web-dev-qa-db-fra.com

Police géniale à l'intérieur du bouton asp

This is my asp: code du bouton qui ne rend pas l'icône de font awesome mais affiche le code HTML tel qu'il est:

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

Toute idée de comment puis-je résoudre ce problème?

c#asp.net.netasp.net-4.0
31
Jack

Avec le bouton asp.net par défaut, vous ne pouvez pas utiliser un bouton HTML et lui attribuer l'attribut runat = server:

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

Donc utilisez le code derrière avec ceci, vous ajoutez:

onserverclick="functionName"

Pour le bouton, puis dans votre C #, faites:

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

Le bouton final ressemble à ceci: 

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

Vous pouvez utiliser un LinkButton

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

Ils supportent HTML dans le champ de texte.

32
Adam Pedley

Vous pouvez le faire, mais pas uniquement avec CSS. Il vous suffit de définir la propriété Text du bouton sur la valeur unicode du caractère fontawesome et de lui attribuer la classe css "fa" afin qu'elle reprenne la police fontawesome.

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

J'ai créé cette bibliothèque d'aide qui fournit tous les codes d'icône fortement typés si cela vous met en difficulté:

<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

13
Rafe

Utiliser LinkButton

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

4
nazmul.3026

Vous pouvez aussi essayer cette 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>
2
Raj Kiran Singh

Dans les autres réponses change asp: bouton par autre, je vous montre si vous voulez utiliser asp: button, FACILE :)

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

1
ShisellM

Obtenez-le sur Nuget!

Paquet d'installation FontAwesome-ASP.NET

FontAwesome Icons In Webforms Badges

Vous pouvez utiliser les icônes FontAwesome dans les contrôles de bouton Web Forms asp.net. Il vous suffit de rechercher l’icône de votre choix dans les propriétés statiques de la classe FontAwesome.Icons. Ensuite, appelez DataBind () sur votre bouton ou DataBind () sur votre contrôle parent ou votre page.

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

0
amir ameri