Question

我正在寻找一个解决方案，我可以在asp.net按钮中添加图像和文本。

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

我只能为按钮指定文字，但如何添加图片呢？

Answer 1

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

使用CSS

我更喜欢CSS，因为它重量轻，你可以根据自己的喜好设计它。

enter image description here

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

第三方控制

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

enter image description here

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

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

Answer 2

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

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

Answer 3

您还可以使用字体图标而不是图像。

<强> 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 );
}

您可以按上述方式删除课程background中的filter和button部分。我只是用它作为按钮的渐变背景。

<强> 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>

Answer 4

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

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

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

4 个答案:

使用CSS

第三方控制