How to Put a Bootstrap Glyphicon Inside an Asp:Button in Asp.Net

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

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>

ASP.NET Button with Bootstrap Glyphicon

Basically you cannot use <asp:Button> with glyphicons because <asp:Button> turns into <input type='button'> that does not support any child elements.

Two possible solutions:

---

Use <asp:LinkButton> instead of <asp:Button>:

<asp:LinkButton runat="server" ID="lbFoo" OnClick="lbFoo_Click" CssClass="btn btn-default">
    <i class="glyphicon glyphicon-backward" aria-hidden="true"></i>Back
</asp:LinkButton>

This is the common solution.

---

Or use <button> to submit a hidden <asp:Button>

<button type="button" class="btn btn-default" onclick="<%=btnHidden.ClientID %>.click()">
    <i class="glyphicon glyphicon-backward" aria-hidden="true"></i>
    Click
</button>

<asp:Button runat="server" style="display:none;" ID="btnHidden"
    OnClick="btnHidden_Click"></asp:Button>

This is a workaround if you insist using <asp:Button> and not <asp:LinkButton>. There are some other workarounds but this is the most legit.

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

Here it is with web forms.

 <div class="col-md-4">
  <asp:Label ID="lblArrival" runat="server" Text="Arrival"></asp:Label>
   <div class="input-group date txtDate">
    <asp:TextBox ID="txtArrival" runat="server" CssClass="form-control" style="width:100%"></asp:TextBox>
     <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
   </div>
  </div>

This is what I do when using a calender. Possibly use span tag as well as input-group-addon.

Also this will advise you too. https://v4-alpha.getbootstrap.com/components/input-group/

bootstrap glyphicons inside asp:buttons disapear after gridview sorting

well, the question wasn't completly clear.. buttons have data-toggle and data-target atributes which LinkButtons don't and that's why wanted them so bad. I Needed to open a modal at the same time I triggered an event on code behind. so this fix the issue: Just trigger the modal yourself with javascript.

<asp:LinkButton ID="AddAreaBtn" runat="server" autopostback="false" OnClientClick="javascript:$('#BorrarAreaModal').modal('show');" OnClick="BorraArea_Click">
    <i aria-hidden="true" class="glyphicon glyphicon-remove"></i>
</asp:LinkButton>

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

You just need to replace html controls with server controls.

FYI: You want to set button control id to DefaultButton, if you want to trigger click event when user presses enter.

<asp:Panel ID="altHeader3SearchPanel" runat="server" DefaultButton="GoButton">
    <div class="row">
        <div class="col-lg-6">
            <div class="input-group">
                <asp:TextBox class="form-control"
                    ID="edit_search_theme_form_1"
                    name="search_theme_form"
                    runat="server"
                    placeholder="Search for..." />
                <span class="input-group-btn">
                    <asp:Button ID="GoButton" runat="server" 
                       CssClass="btn btn-default" Text="Go" />
                </span>
            </div>
        </div>
    </div>
</asp:Panel>

---

Related Topics