web-dev-qa-db-ja.com

ASPボタン内部の素晴らしいフォント

これはasp：buttonのコードで、フォントawesomeのアイコンをレンダリングしていませんが、代わりにHTMLをそのまま表示しています。

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

この問題をどのように解決できますか？

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

デフォルトのasp.netボタンでは、HTMLボタンを使用してrunat = server属性を指定する必要はありません。

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

したがって、これにコードビハインドを使用して追加します。

onserverclick="functionName"

ボタンに、C＃で次の操作を行います。

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

最終的なボタンは次のようになります。

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

LinkBut​​tonを使用できます

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

テキストフィールドでhtmlをサポートしています。

32
Adam Pedley

CSSだけでなく、それを行うことができます。ボタンのTextプロパティをfontawesome文字のUnicode値に設定し、ボタンに 'fa' cssクラスを与えるだけで、fontawesomeフォントが使用されます。

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

クランクを回す場合、強く型付けされたすべてのアイコンコードを提供するこのヘルパーライブラリを作成しました。

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

Nuget：Install-Package FontAwesome-ASP.NET

ソース： https://github.com/kemmis/F​​ontAwesome-ASP.NET

15
Rafe

LinkBut​​tonを使用する

<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

このソリューションを試すこともできます-

<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

他の回答では、asp：buttonが他のものによって変更されますが、asp：buttonを使いたい場合は簡単に表示します:)

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

Nugetで入手してください！

インストールパッケージFontAwesome-ASP.NETの使用法

WebformsボタンのFontAwesomeアイコン

Asp.net webformsボタンコントロール内でFontAwesomeアイコンを使用できます。 FontAwesome.Iconsクラスの静的プロパティから選択したアイコンにデータバインドするだけです。次に、ボタンでDataBind（）を呼び出すか、親コントロールまたはページでDataBind（）を呼び出します。

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