C# asp按钮里面的字体真棒
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15064005/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Font awesome inside asp button
提问by Hyman
This is my asp:button code which is not rendering font awesome's icon but instead shows the HTML as it is:
这是我的 asp:button 代码，它没有呈现字体真棒的图标，而是按原样显示 HTML：
<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?
知道如何解决这个问题吗？
采纳答案by Ryan McDonough
You can't with the default asp.net button you will need to use a HTML button and give it runat=server attribute:
您不能使用默认的 asp.net 按钮，您需要使用 HTML 按钮并为其提供 runat=server 属性：
<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:
到按钮，然后在你的 C# 中执行：
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>
回答by Adam Pedley
You can use a LinkButton
您可以使用 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.
他们确实在文本字段中支持 html。
回答by Rafe
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.
你可以做到，而不仅仅是使用 CSS。您只需要将按钮上的 Text 属性设置为 fontawesome 字符的 unicode 值，并为按钮提供 'fa' css 类，以便它占用 fontawesome 字体。
<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
Nuget：安装包 FontAwesome-ASP.NET
回答by Raj Kiran Singh
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>
回答by amir ameri
Get it on Nuget!
在 Nuget 上获取它！
Install-Package FontAwesome-ASP.NET Usage
Install-Package FontAwesome-ASP.NET 用法
FontAwesome Icons In Webforms Buttons
Webforms 按钮中的 FontAwesome 图标
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.net webforms 按钮控件中使用 FontAwesome 图标。只需从 FontAwesome.Icons 类的静态属性数据绑定到您选择的图标。然后在您的按钮上调用 DataBind() 或在父控件或页面上调用 DataBind()。
<asp:Button ID="Button1" runat="server"
Text="<%# FontAwesome.Icons.Rocket %>" CssClass="fa" />回答by ShisellM
In the others answers changes asp:button by other one, I show you if you want use asp:button, EASY :)
在其他人的答案中，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>回答by nazmul.3026
Use LinkButton
使用链接按钮
<asp:LinkButton runat="server" ID="btnRun" ValidationGroup="edt" OnClick="btnRun_Click" CssClass="greenButton" > <i class='icon-camera-retro'></i> Search </asp:LinkButton>