how to use bootsrap icon on asp.net button

Question

hello friends i want to use Bootstrap like icons with button but when i try using it in my asp.net project the image doesnt shows can you please tell me how to use bootstrap icon with buttons i have tried this code

<i class="icon icon-ok"><asp:Button ID="SubmitBtn" runat="server" OnClick="SubmitBtn_Click" Text="Submit" CssClass="btn btn-small btn-primary" /></i>

and this one too

<asp:Button ID="SubmitBtn" runat="server" OnClick="SubmitBtn_Click" Text="Submit" CssClass="btn btn-small btn-primary" ><i class="icon icon-ok"></i> </asp:Button>

also i tried using this <asp:Button ID="SubmitBtn" runat="server" OnClick="SubmitBtn_Click" Text="Submit&nbsp;<i aria-hidden=true class=icon-ok icon-white></i>" CssClass="btn btn-small btn-primary" />

but it dont work please someone post a solution how to make it work ???

Kenyatta

I don't think you can you it with button, use Link – Pegpega

try uploading your pic to a server and then use <asp:ImageButton ID="buttonPayPal" runat="server" ImageUrl="http://www.paypal.com/en_US/i/btn/x-click-but01.gif" onclick="buttonPayPal_Click" /> – Croaky

I tried using link button it worked thank you .. But now i am not able to use the icon-white css inside the button ... i have used it but still the icon is displayed in gray color. Note:i am using Bootstrap's css – Kenyatta

Why are you not able to use the css? Have you tried CssClass property? – Pinkerton

Answer 1

LinkButton, like this...

<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://mcmap.net/q/847907/-how-to-use-a-twitter-bootstrap-icon-inside-an-asp-net-button

Fourgon

Answer 2

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

Gubernatorial

Please edit with more information. Code-only and "try this" answers are discouraged, because they contain no searchable content, and don't explain why someone should "try this". – Hooks

Answer 3

The simplest option is to use asp:LinkButton or the HTML tag, as mentioned in the previous responses. However, if you specifically want to use asp:button for another reason, I can provide a solution for you. You can add the CSS in separate files and import them into your master page to reuse the code in multiple web forms.

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

Shiny