在 asp.net 按钮中添加图像和文本

Question

我正在寻找一种解决方案，我将能够在 asp.net 按钮中添加图像和文本。

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

我只能为按钮指定文本，但我怎样才能添加图像呢？

Answer 1

默认情况下，ASP .Net 没有可以同时呈现图像和文本的按钮。但是，您可以通过两种方式实现。

使用 CSS

我更喜欢 CSS，因为它重量轻，而且你可以随意设置样式。

<style type="text/css">
    .submit {
        border: 1px solid #563d7c;
        border-radius: 5px;
        color: white;
        padding: 5px 10px 5px 25px;
        background: url(https://i.stack.imgur.com/jDCI4.png) 
            left 3px top 5px no-repeat #563d7c;
    }
</style>

<asp:Button runat="server" ID="Button1" Text="Submit" CssClass="submit" />

第三方控制

它开箱即用。但是，你不能轻易改变他们的风格。

使用第三方控件，例如Telerik RadButton。

最后但并非最不重要的一点是，如果您愿意，您可以自己实现自定义服务器控件。

Answer 2

这是一个简单的解决方案，对我有用：

 <asp:LinkButton runat="server" ID="btnRun" Text="<i class='fa fa-home'></i> Search"
                                    CssClass="btn-success" />

Answer 3

这是一个简单的解决方案，对我有用：

<asp:LinkButton ID="ClickMe" runat="server" Text="Click Me" OnClick="ClickMe_Click" style="text-decoration: none; color: #505050;">
    <asp:Image runat="server" ImageUrl="/Resources/Bitmaps/excel_24.png" style="margin-left:5px;" />
</asp:LinkButton>

Answer 4

您也可以使用字体图标代替图像。

CSS

.button {
   min-width:175px;
   border-radius:50px;
   background:none;
   outline:none;
   border:none;
   color:#fff;
   padding:15px 25px;
   margin-top:10px;
   background: rgba(115,84,178,1);
   background: -moz-linear-gradient(45deg, rgba(115,84,178,1) 0%, rgba(115,84,178,0.95) 34%, rgba(115,84,178,0.95) 35%, rgba(96,107,192,0.91) 62%, rgba(84,160,231,0.85) 100%);
   background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(115,84,178,1)), color-stop(34%, rgba(115,84,178,0.95)), color-stop(35%, rgba(115,84,178,0.95)), color-stop(62%, rgba(96,107,192,0.91)), color-stop(100%, rgba(84,160,231,0.85)));
    background: -webkit-linear-gradient(45deg, rgba(115,84,178,1) 0%, rgba(115,84,178,0.95) 34%, rgba(115,84,178,0.95) 35%, rgba(96,107,192,0.91) 62%, rgba(84,160,231,0.85) 100%);
    background: -o-linear-gradient(45deg, rgba(115,84,178,1) 0%, rgba(115,84,178,0.95) 34%, rgba(115,84,178,0.95) 35%, rgba(96,107,192,0.91) 62%, rgba(84,160,231,0.85) 100%);
    background: -ms-linear-gradient(45deg, rgba(115,84,178,1) 0%, rgba(115,84,178,0.95) 34%, rgba(115,84,178,0.95) 35%, rgba(96,107,192,0.91) 62%, rgba(84,160,231,0.85) 100%);
    background: linear-gradient(45deg, rgba(115,84,178,1) 0%, rgba(115,84,178,0.95) 34%, rgba(115,84,178,0.95) 35%, rgba(96,107,192,0.91) 62%, rgba(84,160,231,0.85) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7354b2', endColorstr='#54a0e7', GradientType=1 );
}

您可以在上述样式中删除button 类中的background 和filter 部分。我只是将它用于按钮的渐变背景。

HTML

<button runat="server" id="btnDownload" class="button" onserverclick="clickEvent">
    <i class="fa fa-download" style="font-size:20px;float:left;"></i> DOWNLOAD
</button>

按钮如下所示。

Fiddle demo here

甚至您也可以通过向<i>...</i> 添加颜色来更改图标颜色。如下所示。

<button runat="server" id="btnDownload" class="button" onserverclick="clickEvent">
    <i class="fa fa-download" style="font-size:20px;float:left;color:#ff4444;"></i> 
        DOWNLOAD
</button>