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

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.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

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

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

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

Method 4

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>

Method 5

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>


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x