The FontAwesome icon is not showing up on this particular view, but it displays correctly on a

I'm facing a strange issue: one of my FontAwesome icons is not appearing on the view, even though all the other icons are working fine. I've been trying to figure out why.

<a class="add-img fa fa-plus-circle" title="@SharedResources.Index.Add" data-bind="click: mainDataAdd"></a>
  • I've confirmed that the icon is named correctly
  • I've experimented with different icon classes, but nothing has worked so far

It seems like no matter which icon I use in that link, it just won't display.

https://i.sstatic.net/M7R2E.png

<tr class="actions-row" role="row">
                        <td class="header-action-row" style="border:none;" colspan="12">
                            <h6 class='datatable-title'><span class='fa fa-list'></span>&nbsp; @SharedResources.Index.SocialWorkerLog</h6>
                            <div class="action-images pull-right">
                                @{
                                    Dictionary<string, string> reports = ReportManager.GetReportList(ReportLocations.ResidentActiviesAllMainGrid_Top.ToString());
                                    if (reports.Count() == 1)
                                    {
                                        <a class="fa fa-print" title="@SharedResources.Index.Print" data-bind="click: function(){printreportSocial('@reports.First().Key',$data);}" style="color:#337ab7; cursor: pointer;"></a>
                                    }
                                }
                                <a class="add-img fa fa-plus-circle" title="@SharedResources.Index.Add" data-bind="click: mainDataAdd"></a>
                            </div>
                        </td>
                    </tr>

Answer №1

Your code has been successfully updated. The font Awesome CDN link has been added and the anchor tag color has been set.

a{
  color:red;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />


<a class="add-img fa fa-plus-circle" title="@SharedResources.Index.Add" data-bind="click: mainDataAdd"></a>

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

How to include padding in HTML elements

Looking for help with aligning this html code equally. <address class="address"> <span>Support E-mail:&nbsp;</span><a href="#"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-c ...

Differences between flexible and fixed-width columns in responsive grid layouts

Recently, I've been diving into the world of flexbox and creating my own grid system. Traditionally, when building a grid system using floats, you have to calculate the number of columns per layout and assign percentages for each column's width. ...

Is it feasible to create a tabbed layout that is responsive?

Would it be possible to create a layout like this and how would you go about doing it? The container has borders, except at the top where the tabs are located. Only the selected tab should have a border at the top. The text on the tabs should be centered, ...

Tips for incorporating AngularJS with dynamically added elements

Essentially, I have a structure similar to this example The formula for every cell in the last column should be: value[i][2] = value[i-1][2] + value[i][0] - value[i][1] I'm currently facing two issues. The first one arises when attempting to progra ...

Superimpose two actionlinks and prioritize the one appearing above

I have implemented a menu similar to http://tympanus.net/Tutorials/SlideDownBoxMenu/. Below this menu, I have placed a webgrid. The issue I am facing is that when I hover over the menu, the slidedownbox with two action links pops up directly over the heade ...

Setting an AngularJS variable as the name attribute in an HTML tag

Important Values {{item.name1}} equals item_name_1 {{item.description}} represents a Band Situation 1 <input name="item_name_1" value={{item.description}}> The input field is filled with Band Situation 2 <input name={{item.name1}} value={{ ...

Linked selection options for state, city, and postal code

I have set up a cascading dropdown list - State -> City -> Pincode . Instead of fetching data from the database, I am using JSON. The dropdown functions smoothly on the local server, but experiences slowness on the web server. Here is a snippet of ...

The custom CSS styling is triggered only when the page is resized in Bootstrap

Currently, I am utilizing bootstrap alongside my custom CSS. The issue I am facing is that some of the styling from my custom CSS only takes effect after resizing my browser window to a smaller size. My custom CSS seems to be applied when the website adapt ...

Closing the Bootstrap navbar collapse by clicking anywhere outside of the menu area

Excuse my lack of experience, but I have a question. I am trying to make Bootstrap "navbar-collapse" close when clicking away or on one of the list items. I stumbled upon this code that seems to do the trick. $(document).on('click',function() { ...

Utilizing jQuery for serializing unorganized lists

I have created multiple lists within a list and I need to pass the IDs using jQuery to another PHP file (updateDB.php). I attempted to serialize the list data but was unsuccessful. I'm not certain if I have implemented it correctly, I searched extens ...

Removing HTML tags from Angular template bindings

My data list sometimes includes HTML elements <li *ngFor="let result of results"> <span [innerHTML]="result.question.title"> </span> </li> The issue with using innerHTML is that the HTML is parsed and rendered, affecting ...

Ensure that the <aside> elements span the entire width of their containing parent element

I am currently designing a website and I am aiming for a specific layout. Any advice on how to achieve this would be greatly appreciated. The header of the page consists of: a logo aligned to the left within an <a> tag 2 widgets placed in <asid ...

Using a varnish proxy to transmit server-sent events

My website is currently operating behind a Varnish proxy, but I am experiencing issues with server-sent events. The connections remain open indefinitely without receiving any content, and Varnish waits for the stream to end before forwarding it to the brow ...

What causes the CSS height attribute to mess up UL lists?

I'm struggling to understand a problem in my nested list. When I set the height of LI elements, they end up overlapping each other. Can someone explain why this is happening and suggest a proper way to apply height without causing this overlap effect? ...

Issues with onClick events not triggering on transformed CSS3 elements

//My mind was completely tangled up. Everything is functioning properly, this question is inaccurate and outdated When I rotate an Element on the Y-axis and attempt to click on it, which has a bound eventListener (onClick), the event does not trigger (hov ...

What is the best way to make grid-column-start and span work seamlessly together?

I'm having some trouble with creating a table using the grid function in CSS. Specifically, I am stuck on how to add dynamic categories at the top without hardcoding styles for each category count. I have tried using the grid-column-start property to ...

The Kendo Grid is refusing to show up within the popup window

I am new to using Angular 2 and Kendo UI. Currently, I am attempting to include a grid inside my pop-up window. While I have successfully displayed the pop-up, adding the grid has proven challenging. The grid is not appearing as expected ...

Strange Safari 15 bug causing unexpected transformations

Hey there, I'm a div with animation on scroll using GSAP. On Safari 15 (no issues below 15), something strange is happening - parts of the letters are leaving an afterimage on the sides. The code snippet I am using for this animation is: this.$refs.l ...

The combination of Inline CSS and Bootstrap classes does not seem to be functioning properly

I'm new to web design and currently working on a website project. My concept involves hiding the #login-box when the user clicks on the login button, and displaying another element (.dashboard) in its place. Initially, I set the .dashboard class to ha ...

How can I ensure a header is displayed on each page by utilizing CSS or JavaScript/jQuery?

On a lengthy page with approximately 15 pages of text, I would like to insert a header at the beginning of each page when the document is printed by the user. Can this functionality be achieved using CSS or JavaScript/jQuery? ...