如何在ASP.NET按钮上使用Bootstrap图标

Question

你好，朋友们。我想在按钮上使用类似 Bootstrap 的图标，但是当我尝试在我的 asp.net 项目中使用时，图片不显示。请问你可以告诉我如何使用带有按钮的 Bootstrap 图标吗？我已经尝试了以下代码： 还有这个： 我还尝试使用以下代码： 但它没有起作用，请问是否有人能提供一个解决方案来让它工作？

- user2228550

---

我认为你不能用按钮，应该使用链接。 - hackp0int

尝试将您的图片上传到服务器，然后使用 <asp:ImageButton ID="buttonPayPal" runat="server" ImageUrl="http://www.paypal.com/en_US/i/btn/x-click-but01.gif" onclick="buttonPayPal_Click" />。 - Idrees Khan

我尝试使用链接按钮，它有效了，谢谢。但是现在我无法在按钮内部使用icon-white css...我已经使用过了，但图标仍然显示为灰色。注意：我正在使用Bootstrap的css。 - user2228550

你为什么不能使用CSS？你尝试过CssClass属性了吗？ - rocky

Answer 1

LinkButton，就像这样...

<asp:LinkButton ID="SubmitBtn" runat="server" OnClick="SubmitBtn_Click" CssClass="btn btn-small btn-primary"><i class="icon icon-ok"></i>&nbsp;Submit</asp:LinkButton>

https://dev59.com/DGkv5IYBdhLWcg3wxzyA#11373500

- scw

Answer 2

<button type="button" onserverclick="Unnamed_ServerClick" class="btn btn-default " runat="server" > <span class="glyphicon glyphicon-search"></span></button>

- abdelhedi hlel

---

请添加更多信息。不鼓励仅包含代码和“试试这个”答案，因为它们没有可搜索的内容，并且没有解释为什么有人应该“试试这个”。 - abarisone

Answer 3

最简单的选择是使用asp:LinkButton或HTML标签，如前面的回答中所提到的。然而，如果你特别想出于其他原因使用asp:button，我可以为你提供一个解决方案。你可以将CSS添加到单独的文件中，并将它们导入到主页面中，以便在多个Web表单中重用代码。

.btnHidden {
    background: none;
    color: white;
    padding: 0rem;
    border: none;
}

<div class="btn btn-primary" onclick="<%=btnSearch.ClientID %>.click()">
    <i class="bi bi-search"></i>
    <asp:Button runat="server" ID="btnSearch" ClientIDMode="Static" CssClass="btnHidden" Font-Bold="true" Text="Search" />
</div>

- Pablo Bonfante

Answer 4

最简单的选择是使用asp:LinkButton或HTML标签，如先前的回复中所提到的。不过，如果你特别想使用asp:button出于某种原因，我可以为你提供一个解决方案。你可以将CSS和JS添加到不同的文件中，并将它们导入到您的主页面中，以便在多个Web表单中重用代码。

function redirectToButton(buttonId) {
        document.getElementById(buttonId).click();
    }

.btnHidden {
        background: none;
        color: white;
        padding: 0rem;
        border: none;
    }

<div class="btn btn-primary" onclick="redirectToButton('<%= btnSearch.ClientID %>')">
    <i class="bi bi-search"></i>
    <asp:Button runat="server" ClientIDMode="Static" CssClass="btnHidden" ID="btnSearch" Font-Bold="true" Text="Search" />
</div>

- Pablo Bonfante