How to Incorporate a Glyphicon into an ASP.NET Button with Bootstrap

I'm a beginner with bootstrap/asp.net and I think I might be making a mistake somewhere. My goal is to have a bootstrap glyphicon appear next to my button. I believe I am not able to use asp:Button, but instead should use LinkButton.

Here is the code:

//Head 

<link href="Content/bootstrap.min.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1">


//Body

<form id="defaultform" runat="server">
  <div class="container">
   <asp:LinkButton    ID="ButtonGetProduct" 
                      runat="server" 
                      CssClass="btn btn-primary btn-lg"    
                      OnClick="ButtonGetProductName_Click">
              <span class="glyphicon glyphicon-barcode"></span>Register
    </asp:LinkButton>

  </div>
</form>

UPDATE: I just included in the header, then changed "glyphicon glyphicon-barcode" to "fa fa-barcode".. it's working perfectly now!

Answer №1

Give this a shot, it should do the trick

<asp:LinkButton ID="LinkButton1" runat="server"><i class="glyphicon glyphicon-home"></i>Home</asp:LinkButton>

My current framework is bootstrap 3.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the power of CSS using :after and :nth-child selectors

.app-btn { font-size: 0px !important; } .app-btn:after { content: '+2500'; visibility: visible; font-size: 15px !important; } .app-btn:after:nth-child(1) { content: "+18000"; } .app-btn:after:nth-child(2) { content: "+14000"; } < ...

What is the method for attaching a div to another div using javascript?

function displayContent(a) { var content = $("#" + a).html().trim(); alert(content); $('#temstoredivid').append( "<div class='maincover' id='maincov1'>" + " <div class='subcover' id='sub ...

Ways to cap the height of elements at predetermined values ("stepped") depending on the content within

After posting a question on this topic here, I am seeking advice on how to implement "step-based heights" for a div element. To further clarify, my goal is to have each box with a height that is a multiple of 400px. For example, if the height is 345px, it ...

Avoid utilizing Infragistics ig_common component

Our legacy ASP.NET web application utilizes Infragistics components and currently requires a virtual directory named "ig_common" to access javascripts and images. Is there a solution to avoid this dependency? For instance, can we import all of Infra's ...

Exploring Java Programming with HTMLEditorKit

Here is my source code: I am trying to change the font color using only CSS. This is how I am inserting HTML: <span class="tag1">I love <span class="tag2">apple</span></span><span class="tag2"> pie</span> When using ...

Conceal the footer using CSS while the slide is in focus

Trying to figure out a way to hide the footer when a specific container is active: For example, how can I hide the footer when the second and third items are selected as active? <div class="owl-stage"> <div class="owl-item"></div> & ...

What is the correct way to implement checkbox validations using jQuery?

I have a total of 3 checkboxes that I would like to arrange in a particular order based on their checks. Currently, when one checkbox is selected for download, the logic I have implemented only considers the first checkbox and ignores the rest. I am look ...

Tips for maintaining consistent formatting of a div element across various sizes

Looking to create a Bootstrap Jumbotron that features a background image, text (h1 and p), and a call-to-action button that scales appropriately for different viewports without sacrificing formatting. Essentially, the goal is for the div to behave like an ...

What could be causing the issue of my CSS file not properly connecting with my HTML files in Django?

I am facing an issue with linking the CSS file to the HTML file in my code. Despite not showing any errors, there is no effect on my webpage. The files I have included are settings.py, base.html, and base.css. Additionally, my static folder is located outs ...

Clicking on the React Bootstrap Checkbox within the Nav component does not trigger a rerender of the NavItem component

Encountering an unusual issue while using a Nav and NavItem with a Checkbox from React Bootstrap. What I've noticed is that when clicking directly on the checkbox instead of the NavItem button, the checkbox does not re-render correctly even though my ...

"Customizing the topbar of Twitter Bootstrap for right-to

Attempting to implement twitter bootstrap for a top navigation bar on my master page. http://jsfiddle.net/ZqCah/1/ Encountering some issues and seeking assistance: 1- Desiring to switch the direction of all content to right-to-left (rtl). This would me ...

Tabulator and its convenient scrollable column feature allows for easy navigation

In case my tabulator column is exceeding its length, is there a way to enable scroll functionality for that specific column? Although the resizable rows feature permits users to resize and view all the content, can a scrollbar be implemented exclusively ...

When attempting to pass a variable from Ajax to PHP, the function "isset($_POST[])" may not function as expected

While attempting to capture the AJAX post in my PHP code, I encountered a problem. Here is what I am trying to achieve: whenever there is a change in the value of select2, I want to retrieve that result and send it to my PHP script for use in a database q ...

In September of 2012, a new version of the ajax toolkit combobox was released with a feature that

In September 2012, the Asp.net Release introduced a read-only feature for the ajax toolkit combobox. Are you familiar with how to resolve conflicts that may arise when using jquery alongside the ajax toolkit? ...

Is there a way to perfectly center text both vertically and horizontally to the right side of an image?

I'm working on developing a mobile website using jQuery Mobile and I want to include images in my "collapsible" elements. Here is the code I am using: <div data-role="collapsible" data-collapsed="true"> <h3><img src="image ...

The detailView feature in wenzhixin bootstrap-table is failing to initialize the child row

I am currently utilizing the wenzhixin bootstrap table and attempting to initialize another bootstrap table within a child row known as 'detailView' in the code. Previously, I was using datatables but found this method to be simpler and more dir ...

Is there a way to turn off the "swipe to navigate back" feature in Microsoft Edge using JavaScript or jQuery?

Working on a website that features horizontal object rotation. For instance, starting with the front view of an object followed by side, back, other side, and then back to the front. In this case, there are 24 images of an object, each taken at a 15 degre ...

What role does the 'node_modules' directory play in a project?

Can you explain the purpose of the node_modules folder? When libraries are downloaded using npm, they are stored in the node_modules folder. To save space when uploading to platforms like GitHub, this folder is typically ignored and dependencies can be in ...

Why is it necessary to use '!important' to change the color of my navbar?

Hey there! I'm diving into the world of bootstrap, CSS, and HTML for the first time and I'm looking to spice up my navbar by changing the text color. However, I want to achieve this without resorting to the use of "!important". Take a look at my ...

Creating a zigzag pattern with a linear gradient in CSS

When attempting to create a background color for my body element using linear gradient, I noticed that it resulted in a zigzag effect I experimented with the following code: Body{ background: linear-gradient(45deg, Blue 50%, red 50%) } The outcome wa ...