htmlasp.nettwitter-bootstrapbuttonaspbutton

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?


Solution

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