How do I put a Bootstrap Glyphicon inside an asp:Button in ASP.Net?

Question

I'm using Bootstrap 3 in my project, and I want to use Bootstrap Glyphicons in ASP.net buttons.

Here is the code I used, though it didn't work out (I got a sample which uses Twitter Bootstrap <span> tags instead of <i> tags):

<asp:Button ID="btnRandom"
    runat="server"
    Text="<span aria-hidden='true'
        class='glyphicon glyphicon-refresh'>
        </span>"
    onclick="btnRandom_Click" />

Maybe something extra should be done.

How can I get it to work? Thanks in advance for the replies.

Solution 1

You have to use asp:LinkButton instead of a asp:Button, here is how it works for me using Bootstrap 3 in an ASP.NET web-application:

From your code you can make the following work:

<asp:LinkButton ID="btnRandom" 
            runat="server" 
            CssClass="btn btn-primary"    
            OnClick="btnRandom_Click">
    <span aria-hidden="true" class="glyphicon glyphicon-refresh"></span>
</asp:LinkButton>

Here is an example of what I use for a Submit Button with text "Submit":

<asp:LinkButton ID="SubmitBtn" 
                runat="server" 
                CssClass="btn btn-primary"    
                OnClick="SubmitBtn_Click">
    <span aria-hidden="true" class="glyphicon glyphicon-ok"></span>Submit
</asp:LinkButton>

Solution 2

What is real use of ASP Server control when you can do that in HTML server control :

You can convert the HTML element to a server control by setting the runat="server" attribute.

<button runat="server" >
<span aria-hidden="true" class="glyphicon glyphicon-refresh"></span>Refresh
</button>

Solution 3

try this

<button id="btnSubSearch" runat="server" type="submit" class="btn btn-default" onserverclick="btnSubSearch_Click">
<span aria-hidden="true" class="glyphicon glyphicon-search">
</span>
</button>

Solution 4

its work for Asp:Button glyphicon style:

<div class="btn btn-primary glyphicon glyphicon-search">
    <asp:Button ID="Button1" runat="server" Text="Search" BackColor="Transparent" BorderWidth="0" OnClick="Button1_Click" />
                    </div>

Solution 5

You can use linkButton instead of button or asp:Button just like this;

<linkbutton runat="server"><a class="btn btn-info btn-md"> <span 
 class="glyphicon glyphicon-plus" style="font-size: x-large; font-weight: 
 bolder"></span> </a></linkbutton>

View more solutions

Comments

[lucidgold]

Can you get Server-Side OnClick to fire?

[Mehdi Souregi]

By using onserverclick event : msdn.microsoft.com/en-us/library/…

[lucidgold]

Souregi: Thanks for that, very cool! Learn something new everyday.

[Mehdi Souregi]

You're welcome :) if this solution suits you, hit the green button

[lucidgold]

Well I also posted an answer using LinkButton. But I also like your approach, its up to the developer to choose between HTML-Button or ASP:Link/Button

[nikodaemus]

Why the <i> tag instead of the usual <span> tag?

[lucidgold]

@skia.heliou: Using a <span> tag works too, and I believe <span> is better than <i> in this context. The <i> tag is suggesting a visual change however, it is not applied since there is no text. The <i> tag will soon be deprecated. I have updated my answer, thanks!