Testing the fallback of a fontawesome stylesheet in ASP.Net Core using CDN

Which class should be used to test the fallback of the fontawesome css stylesheet in ASP.net Core 2.2 Tag helper?

I've implemented this, but when I check using F12 Developer Options Network in Chrome, it shows that both the cdnjs and local library are being downloaded.

<!--font awesome css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css"
      integrity="sha256-zmfNZmXoNWBMemUOo1XUGFfc0ihGGLYdgtJS3KCr/l0=" crossorigin="anonymous"
      asp-fallback-href="~/lib/font-awesome/css/all.min.css" asp-append-version="true"
      asp-fallback-test-class="fas" asp-fallback-test-property="font-family" asp-fallback-test-value="Font Awesome 5 Free" />

I have experimented with classes fa, far, and fas with respective font-family values: Font Awesome 5 Free and FontAwesome.

I am using version Font Awesome Free 5.10.2. Since I only need far and fas (regular and solid), should I use all.min.css?

cssasp.net-corestylesheet

Answer №1

  1. Ensure that the .min file contains the same classes with the same attributes and values. However, you can experiment with adding the following: asp-fallback-test-class="fab", asp-fallback-test-property="font-style", asp-fallback-test-value="normal"
  2. Consider including: asp-suppress-fallback-integrity="true".
  3. Additionally, consider removing: asp-append-version="true".

For more information on point 1, visit: ASP.NET Core Script Tag Helper asp-fallback-src fails integrity check.

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

Issue with Paypal Express Checkout page appearance in Firefox browser

After completing the integration of PayPal Express Checkout on my client's website, I encountered an issue while testing its features and checking for browser compatibility. When going through the checkout process in Firefox, the PayPal Checkout Page ...

cssfirefoxpaypal

IE 11 struggling with improper alignment of Flex Container

Having an issue with this code snippet: It works in Chrome, Firefox, and Edge but not in Internet Explorer 11. There are 3 elements (red, yellow, green) stacked vertically, with a blue element overlaying them taking up 50% of the height. Expected result: ...

htmlcssinternet-explorerflexbox

My CSS nesting seems to be posing a problem - any idea what

Something unexpected happened while I was working on a project with others. Last night, some files were edited and when I updated my subversion today, the nested divs seemed to have lost their hierarchy. I have been trying all day to fix this issue but wit ...

csshtmlnested

Tips for customizing the color of dropdown options?

Help needed with changing the color of dropdown items in my code: I am looking to change the color of Dr. Winthrop, Dr. Chase, and Dr. Sanders. Below is the HTML/Bootstrap code snippet: <li class="dropdown"><a href="#" data-toggle="dropdown"> ...

htmlcsstwitter-bootstrap

Is :before functionality not compatible with img tags?

Is there a way to use the :before selector in CSS to overlay an image on top of another image? I have tried implementing it, but it seems that placing an image before an img element doesn't work as expected. Here is the CSS code I am using: .containe ...

htmlcss

How can I make sure the footer stays at the bottom of the page on shorter pages in my

I am currently working on a website and trying to figure out how to make the footer stick to the bottom of the screen. I attempted a solution from ryanfait but it didn't work with my theme. Another method I tried using absolute positioning placed the ...

htmlcsswordpress

What is the best way to set breakpoints on Material UI components?

Currently, I am exploring material-ui and I'm curious if there is a way to set all breakpoints at once. The code snippet below seems quite repetitive. Is there a more efficient method to achieve this? <Grid xs={12} sm={12} md={12} lg={12} xl={12} ...

cssreactjsmaterial-ui

What is the best way to incorporate an image using <ul> type formatting?

Appearance <style> ul{ list-style-image: url('../8iAbk7rjT.png'); } </style> Development <ul> <asp:DataList ID="dd" runat="server"> <ItemTemplate> <li><a href="/Pages/index.aspx?cate ...

c#htmlcssasp.net

What is the method for customizing the hover color in a mantine.ui menu?

I've been attempting to modify the menu color when hovering over it, but unfortunately, it's not working. Could anyone provide guidance on how to change the hover color in mantine.ui menu? ...

cssreactjsmantine

Input fields that are dynamically generated do not respond to changes made using .click and .blur methods in jQuery CSS

I'm experiencing an issue with a HTML form where a new input field is generated when a button is clicked, but the dynamically created field is not styled properly. Below is the HTML form code: <form id="form"> <input type="text" id="ent ...

jquerycss

Recording the mouse click action following the turning over of the tile

Greetings! I have successfully implemented a zoom and flip feature on my tile. My tile now showcases two different views - the initial view displays an image, while the back view shows text. However, I am encountering an issue where multiple alert boxes ...

javascriptjqueryhtmlcss

How can I write a click event for an image within a PNG using jQuery?

Is it possible to add a click event to an image with a hole inside, allowing the image behind it to show through? Check out this JSFIDDLE for reference //javascript code $('#ant').click(function() { alert("hi"); }); ...

jqueryhtmlcss

jQuery's AJAX feature fails to identify the newly modified div classes

For my new website, I am developing a simple checklist feature. To handle the check and uncheck requests from users, I'm using jQuery's $.ajax() function. Whenever a user clicks on the check or uncheck buttons, jQuery retrieves the validation tok ...

javascriptjqueryhtmlcssajax

Ways to stop button from wrapping inside a div

While working on a search page, I encountered an issue where the submit button overlaps with the text input when zooming in due to lack of space. Is there a solution to prevent this overlapping and keep the layout intact? HTML <input type="text> &l ...

htmlcss

What is preventing the use of overflow: hidden in div elements?

I'm having trouble with the overflow property in my CSS. Even though I've set it to hidden, my div is still scrollable. Can someone please explain why this might be happening? .myDiv { position: relative; width: 100%; min-height: 100v ...

htmlcssscrolloverflowcss-position

Troubleshooting the issue of CSS animations activating twice and causing a flickering effect specifically in the Firefox browser

I am facing an issue with CSS animations in Firefox. When I try to slide in some radio buttons upon clicking a button, the animation seems to be firing twice in Firefox while it works fine in Chrome. I have attempted several solutions but haven't been ...

javascriptjqueryhtmlcssanimation

Creating an adaptable CSS triangle for an image

Is there a way to create a responsive triangle on an image that resizes properly and stays aligned? I'm currently having issues with it becoming misaligned. How can this be resolved? .image { width: 100%; } .image ...

htmlcssimagebootstrap-4css-shapes

Different methods for adjusting the bot's background hue

Currently, I have my Luis bot integrated into a SharePoint website using the iframe HTML element. I am looking to add some custom styling to it, specifically changing its background color. I found a tutorial that explains I need to clone the source code a ...

css.netazurebotframework

Combining selected boxes through merging

Looking to create a simple webpage with the following requirements: There should be 10 rows and 3 boxes in each row. If I select 2 or more boxes or drag a box, they should merge together. For example, if my initial screen looks like this: and then I se ...

javascriptjquerycssjquery-uijquery-ui-selectable

Narrow down your search results with date range filtering in Angular Material

Seeking guidance as a newcomer to Angular Material, I am trying to implement a date range filter for a table of N results. The options in the filter select are (1 day, 5 days, 1 week, 15 days), which are populated using a variable JS vm.rangos=[ {id ...

angularjshtmlcssangular