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?

I could not understand what you mean Daniel, can you post a link or a sample code? — allence, Jun 18 '14 at 12:39

lucidgold · Accepted Answer · 2015-06-22T15:56:45.447

91

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>

edited Jun 22 '15 at 15:56

answered Jun 18 '14 at 14:44

lucidgold

4,432
5
31
51

5

Why the **** tag instead of the usual **** tag? – nikodaemus Jun 22 '15 at 15:06
5

@skia.heliou: Using a tag works too, and I believe is better than in this context. The tag is suggesting a visual change however, it is not applied since there is no text. The tag will soon be deprecated. I have updated my answer, thanks! – lucidgold Jun 22 '15 at 15:56

score 19 · Answer 2 · edited Jan 09 '16 at 08:11

19

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>

edited Jan 09 '16 at 08:11

Venkat.R

7,420
5
42
63

answered Jun 18 '14 at 13:50

Mehdi Souregi

3,153
5
36
53

1

Can you get Server-Side OnClick to fire? – lucidgold Jun 18 '14 at 15:02
4

By using **onserverclick** event : http://msdn.microsoft.com/en-us/library/system.web.ui.htmlcontrols.htmlbutton.onserverclick(v=vs.110).aspx – Mehdi Souregi Jun 18 '14 at 15:06
Souregi: Thanks for that, very cool! Learn something new everyday. – lucidgold Jun 18 '14 at 15:08
You're welcome :) if this solution suits you, hit the **green** button – Mehdi Souregi Jun 18 '14 at 15:11
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 – lucidgold Jun 18 '14 at 15:13

score 7 · Answer 3 · edited Jul 13 '16 at 06:07

7

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>

edited Jul 13 '16 at 06:07

Priya

1,359
6
21
41

answered Jul 15 '15 at 05:22

Cubo Hayachi

71
1
1

score 1 · Answer 4 · answered Jun 05 '17 at 06:32

1

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>

answered Jun 05 '17 at 06:32

zafer

11
2

abdol-hamid Hosseiny · Answer 5 · 2017-06-21T07:44:25.247

1

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>

edited Jun 21 '17 at 07:44

answered Jun 21 '17 at 07:19

abdol-hamid Hosseiny

122
10

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

5 Answers5

Linked

Related