Applying an icon class to an HTML5 button dynamically through the code behind

I have a customized HTML5 button that serves as both a SAVE and CREATE option, with the text changing dynamically based on conditions set in the code behind. Everything is running smoothly so far, however, I am facing an issue when attempting to include an icon style element to my button using the code behind:

<button typeof="button" id="btnSaveCreate" class="btn btn-danger" runat="server" onserverclick="btnSaveCreate_ServerClick"><i class="fas fa-road"></i></button>

I have been experimenting with altering the text and adding a Font Awesome icon through the code behind like this:

btnSaveCreate.InnerText = "Save <i class=\"fas fa-road\"></i>";

Unfortunately, the above method doesn't seem to work, and neither does this alternative approach:

btnSaveCreate.InnerText = "Save";
btnSaveCreate.Attributes.Add("class", "fas fa-road");
c#cssasp.nethtml

Answer №1

To implement an icon using an <asp:Button>, you can follow the code snippet below (Confirmed to be functional)

<asp:Button typeof="button" id="btnSaveCreate" runat="server"></asp:Button>

Then, utilize the character code within the code behind to specify the icon

btnSaveCreate.CssClass = "fas";
btnSaveCreate.Text = Server.HtmlDecode("Save &#xf018;");

Alternatively, if preferred (also verified to be operational):

<button typeof="button" id="btnSaveCreate" class="btn btn-danger" runat="server"></button>

Proceed with the following code in the backend:

btnSaveCreate.Attributes.Add("class", "fas");
btnSaveCreate.InnerText = Server.HtmlDecode("Save &#xf018;");

Answer №2

Try using .InnerHtml instead of .InnerText

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

What is the best way to align paragraphs vertically within a required square-shaped div using CSS (with images for reference)?

I am trying to style a table in a specific way, but I'm facing some challenges. First, I want to make the internal div inside the table square with a percentage height. Next, I need to have two paragraphs stacked on top of each other within the same ...

htmlcssflexbox

Sending input from text box to stored procedure and displaying results in gridview

Trying to figure out where I might be making a mistake. The page loads fine, but when I click on the search button (after entering data in the last name field), it just keeps loading. Here's the code from my aspx.cs file: using System; using System ...

c#asp.netsql

CSS / JavaScript Navigation Menu overshadowing Flash content in Firefox

On my website, I have a drop-down menu that was created using CSS and JavaScript. This menu drops down over a Flash animation. Interestingly, in Internet Explorer 6 and 7, the drop-down menus successfully appear over the Flash animation. However, in Mozill ...

javascriptcssflashnavigation

What is the best way to incorporate a URL link in Java while utilizing a CSS element?

Below is the provided code snippet: <span class='maincaptionsmall'> Test </span> Due to certain constraints in my page related to ajax and jquery scripts, I am unable to use HREF as a link. In other words, I can't implement som ...

javascripthtmlcssajaxlocation-href

NetCore offers an alternate method for generating serializers using XmlSerializer

In our programming, we employ the XmlSerializer to create temporary assemblies that contain serializers. These assemblies are then cached to keep resource usage at a minimum. Currently, our application operates on the .NET Framework, and the code snippet ...

c#.netxml.net-core

Why is this specific element showing as undefined in the form during editing, but appearing correctly in both the debugger and console.log?

I've encountered an error that keeps popping up: "Cannot read property 'textContent' of undefined at HTMLDocument". This error specifically occurs when dogName, dogBreed, and dogSex are set within the 'click' listener. It's st ...

javascripthtmlfetchpatchjson-patch

Explore the search function that scours through every external HTML page

I am in the process of creating a website and I need to implement a search functionality. My website consists of several HTML pages such as index.html, about.html, contact.html, etc. The search bar is located in the navigation menu on every page. I would l ...

javascriptjqueryhtml

Ways to keep two left floating divs from overlapping?

My main div covers the entire website. Within it, there are two smaller divs, both with the CSS property float: left. The left div is shorter in height than the right one, causing the content of the right div to overlap onto the left div when its length ex ...

htmlcss

Is there a way to utilize reflection to pass a type as a generic parameter?

Using reflection, I iterate through all the properties of T in properties to check if they are classes. If a property is a class, I try to create a new instance of MyORM<type1>. However, this leads to an error in the following line of code: var t ...

c#.net

using jquery ajax to assign an image to an image control

I am struggling to display an image from a base64 string result using the image control. I tried $('Image1').attr(); but it's not working. Any assistance would be greatly appreciated. $.ajax({ async: false, type: "POST", url: "PostDat ...

javascriptjqueryasp.netajax

The AngularJS page on my website is currently stuck in the mobile version, and strangely, the Google Chrome console is

When browsing our AngularJS website in mobile view on Google Chrome, it gets stuck and becomes unresponsive. The developer console does not show any error messages during this time. To replicate the issue, switch to mobile view, click on the "All top compa ...

javascriptjquerycssangularjsgoogle-chrome

Is there a way to divide text without including line breaks?

As I delve into SplitText, the GSAP plugin, a peculiar observation surfaces - it alters the; <br> tag within my element (uncomment the first line in javascript to witness the transformation). Take a look at this example: https://codepen.io/anon/pen ...

javascriptcssgsap

Instructions on adjusting the height of a flexbox container to utilize the available space

I am facing a challenge in grasping the interaction between flexbox containers and other elements on a webpage. When I have only a flexbox on my page, everything works smoothly. However, when I introduce other elements, things start acting strangely. It se ...

cssflexbox

Steps to incorporate iframe into a webpage with 100% height and enable page scrollbars

Looking to seamlessly integrate an iframe into a webpage? Here are the requirements: The iframe height must adjust to fit its content, occupying 100% of available space. Hide scrollbars within the iframe, allowing the page's scrollbars to adjust acc ...

javascriptjqueryhtmlcssiframe

Using Timers in ASP.NET Applications

In my asp.net application start event, I am trying to implement a Timer class for triggering events. Specifically, I want to execute one trigger every night at 11 pm, another at 5:30 in the morning, and then every hour thereafter. private System.Threading ...

asp.nettimer

What is the method for including disabled properties for textboxes in a CSS file?

I don't have much expertise in CSS, so please bear with me if I use any incorrect terminology. In my webforms on .NET, I typically utilize a css file named styles.css. Within this file, there is a method that looks like this: .tbox { border-right ...

htmlcssasp.netbackground-color

Show the button's value inside a div when clicked using Javascript and HTML

I am troubleshooting an issue where the value of a button is not displayed in the picked_letters div when the button is clicked, despite having the appropriate code in both the html and javascript files. The structure of the html file is as follows: < ...

javascripthtmlbutton

Insert, delete, and modify rows within the table

I'm struggling with a JavaScript issue and could use some help. How can I add a new row for all columns with the same properties as the old rows, including a "remove" button for the new row? Is there a way to prevent editing cells that contain b ...

javascripthtml

Combining a collection by one attribute following a filtration based on a different attribute

I am working with a class: class Cars { String Part; int NrOfParts; } and have a List<Cars>. My goal is to calculate the total NrOfParts for a specific Part using lambda expressions. What I want is something along these lines: double su ...

c#.netlinqwhere-clause

Compel the creation of stationary entities

After studying static objects in classes, I have discovered that they are constructed when the class is first referenced. However, there are times when I would like to initialize the statics when the program starts. Is there a method, possibly using anno ...

c#.net