43

这是我的 asp:button 代码，它不呈现字体真棒的图标，而是按原样显示 HTML：

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

知道如何解决这个问题吗？

4

9 回答 9

71

您不能使用默认的 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>
于 2013-02-25T09:45:22.920 回答
40

您可以使用链接按钮

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

他们确实支持文本字段中的 html。

于 2014-10-26T05:44:56.257 回答
17

您可以做到这一点，而不是纯粹使用 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：安装包 FontAwesome-ASP.NET

来源：https ://github.com/kemmis/F​​ontAwesome-ASP.NET

于 2015-04-14T13:53:22.607 回答
9

使用链接按钮

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

于 2018-04-24T09:17:47.687 回答
3

您也可以尝试此解决方案 -

<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>
于 2016-04-07T11:05:30.753 回答
1

在其他答案中，将 asp:button 更改为其他答案，如果你想使用 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>

于 2017-03-09T22:34:49.910 回答
0

在 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" />

于 2017-02-11T18:48:49.717 回答
0

此代码适用于 v5.15

我必须将以下文件添加到 wwwroot 下名为 fonts 的文件夹中

  1. FontAwesome.otf
  2. fontawesome-webfront.eot
  3. fontawesome-webfront.svg
  4. fontawesome-webfront.ttf
  5. fontawesome-webfront.woff
  6. fontawesome-webfront.woff2

<div>
    <a asp-controller="Controller" asp-action="CSHTMLFILE"><i class="fa fa-1x fa-arrow-left "></i> Go Back to Previous Page</a>  
</div>

于 2021-06-24T21:30:18.790 回答
0

把它放在你的加载表单方法中：

btn_Test.Text = "Hello " + FontAwesome.Icons.LongArrowRight;

和CssClass按钮：

CssClass="fa"

于 2021-03-17T23:15:52.457 回答