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

Htmlasp.netTwitter BootstrapButtonAspbutton

Html Problem Overview


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.

Html Solutions


Solution 1 - Html

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

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

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

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>

                

Solution 5 - Html

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>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionallenceView Question on Stackoverflow
Solution 1 - HtmllucidgoldView Answer on Stackoverflow
Solution 2 - HtmlMehdi SouregiView Answer on Stackoverflow
Solution 3 - HtmlCubo HayachiView Answer on Stackoverflow
Solution 4 - HtmlzaferView Answer on Stackoverflow
Solution 5 - Htmlabdol-hamid HosseinyView Answer on Stackoverflow