Using a Bootstrap Glyphicon on an ASP.NET Button

Question

Using a Bootstrap Glyphicon on an ASP.NET Button

Is there a way to utilize glyphicons as icons for ASP Buttons using C# instead of HTML?

Normally, you would apply the proper glyphicon CSS to an <i> element and then nest it under the desired button. But I want to accomplish this programmatically.

I attempted the following code without success:


HtmlGenericControl i1 = new HtmlGenericControl("i");
i1.Attributes["class"] = "glyphicon glyphicon-backward";
i1.Attributes["aria-hidden"] = "true";

Button btnFirst = new Button();
btnFirst.ID = "btnFirst";
btnFirst.CommandName = "FirstPage";
btnFirst.CssClass = "btn btn-default pageButton";
btnFirst.Click += new EventHandler(btnFirst_Click);
btnFirst.Controls.Add(i1);
container.Controls.Add(btnFirst);

When running the code above, the button appears but with no icon. There is also no nested <i> element in the HTML source.

c#css asp.net twitter-bootstrap twitter-bootstrap-3

Answer 1

Answer №1

Essentially, the issue stems from the fact that <asp:Button> cannot be paired with glyphicons because when used, it transforms into <input type='button'>, which does not allow for any child elements to be included.

There are two potential solutions:

Option 1: Utilize <asp:LinkButton> in place 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 a commonly employed solution for this issue.

Option 2: Use <button> to trigger 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 workaround can be utilized if there is a preference for using <asp:Button> over <asp:LinkButton>. While there are other workarounds available, this method is considered most legitimate.

Answer 2

Essentially, the issue stems from the fact that <asp:Button> cannot be paired with glyphicons because when used, it transforms into <input type='button'>, which does not allow for any child elements to be included.

There are two potential solutions:

Option 1: Utilize <asp:LinkButton> in place 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 a commonly employed solution for this issue.

Option 2: Use <button> to trigger 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 workaround can be utilized if there is a preference for using <asp:Button> over <asp:LinkButton>. While there are other workarounds available, this method is considered most legitimate.

Using a Bootstrap Glyphicon on an ASP.NET Button

Answer №1

Similar questions

Are you able to identify the contrast between my coding and the tutorial?

What is the process for generating a list of Razor Pages in Blazor?

Arranging H1 Styling with CSS for Optimum Alignment

Printed pages featuring neatly organized two-column div layout

Once the AutoReset property is set, the previously paused System.Timers.Timer begins to fire the Elapsed

Content of two li tags in row and column are not aligned properly

Problem with the `file` input not working properly

In search of tutorials on UI and working thread management

Modify a value using jQuery

Identifying when a .NET application is starting up in a cold or hot state

Getting a callback from a button located within a TableHeader to a UiViewController in Xamarin.iOS

Creating a stylish design: integrating a progress bar within a card using Bootstrap 5

Enable UserControl to fill the entire screen

Switching the background color of a button on click and resetting the color of any previously clicked buttons (a total of 8

RestSharp does not produce any response when used in IIS

Guide to creating a responsive layout using CSS and HTML

Placement issue with image in Bootstrap card on mobile devices

When a dynamic control is created on a page, I must retrieve the value upon button click

The CSS tag combination of 'position:relative;' and 'top:xx%;;' functions properly in Chrome, however, it does not work in any non-webkit browsers such as Firefox, Internet Explorer, Opera, etc

Retrieving Date and Time from MySQL database with C# and AllowZeroDatetime flag