The issue persists with Font-Awesome loading in Edge and IE browsers

I've been experimenting with using netdna.bootstrapcdn.com. So far, it's working perfectly in Firefox and Chrome but I'm encountering loading issues in IE - 11 and Edge.

This is how I imported the CSS library:

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" />

The browser console is showing this error message:https://i.sstatic.net/kIovv.jpg

I also attempted to copy/download the CSS styles and paste them into a custom file for importing, but this resulted in breaking the display in all browsers.

htmlcssbootstrap-4netdna-api

Answer №1

This error is occurring because of a faulty URL reference. Specifically, the href attribute of the Font-Awesome library has been tinkered with in the following instance:

<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" />

<i class="fa fa-adjust" aria-hidden="true"></i>

Answer №2

I'm not entirely sure how you have things set up - like when you tested 'direct' and encountered errors on all browsers, regardless of having a doctype or not.

However, it appears that the main issue lies within the URL syntax. When starting with only //, Edge (at least on my Windows 10 system) failed to locate the file - after a brief delay. Once I added https:, Edge was able to find the file without any issues.

This code snippet seems to be functioning properly:

<!doctype html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
</head>

<body>
</body>

</html>

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

Is there a way to navigate through div text within a stationary container?

My current challenge involves a container that contains an overflow of text, but I desire for the container to remain fixed. The dilemma arises when the text spills out from both the top and bottom edges of the container. Instead of using scroll bars withi ...

jquerycssparallax

Tips for deleting text on a webpage either prior to or following a certain character

Is there a way to remove everything after either 'am' or 'pm' in the date (the excerpt) on a WordPress site that has a list of headlines followed by a source attribution and a date? Example: NBA Finals: Warriors will face Cavaliers ye ...

jquerycss

Ways to customize the hover effect for react-bootstrap navbar link

I'm looking to update the hover effect color from white to green, but I'm having trouble finding the correct CSS code for it. <Navbar fixed='top' collapseOnSelect expand="md" variant="dark" className="animate ...

javascriptcssreactjsreact-bootstrap

Display a div every 3 seconds with the help of jQuery

I am seeking a solution to display the second div (box2) every 3 seconds. Can anyone help me achieve this using jQuery? <div id="box1" style="background-color:#0000FF"> <h3>This is a heading in a div element</h3> <p>This ...

javascriptjqueryhtmlcss

Fade background position rollover effect

I'm facing a challenge with animating my background image using background positioning. The CSS is functioning correctly, but when I attempted to enhance it by adding jQuery for a rollover effect, the animation isn't working as expected. Can anyo ...

jquerycss

The issue of Jquery selectors not functioning properly when used with variables

Currently working on a script in the console that aims to extract and display the user's chat nickname. Initially, we will attempt to achieve this by copying and pasting paths: We inspect the user's name in the Chrome console and copy its selec ...

javascriptjqueryhtmlvariablesselector

`Why won't the checkbox uncheck when the dropdown is changed in jQuery?`

I have a roster of users, each with a unique checkbox for selection. When I adjust the dropdown menu, a new group of users is chosen and marked as selected. However, I am struggling to uncheck the previously selected checkboxes based on the last dropdown c ...

javascriptjqueryhtmlcheckboxdrop-down-menu

adjust bootstrap column width to fill the container

https://i.stack.imgur.com/tCuL6.png I am hoping that this image will provide a visual aid for what I am trying to convey. My goal is to have the arrow and the boxes aligned in a row without any empty space on the right side. As you can see, the leftmost b ...

htmlcsstwitter-bootstrap

Manipulate and scale with jQuery

I am currently utilizing the jQueryUI library with its Draggable and Resizable functionalities to resize and drag a div element. However, I am encountering some unexpected behavior where the div jumps outside of its container upon resizing. How can I resol ...

javascriptjqueryhtmlcssjquery-ui

Tips for customizing the color of mat-select placeholder text?

I've been attempting to modify the color of a mat-select placeholder. It functions properly when using 'background-color' but not when using 'color'. Below is my CSS code: /deep/ .mat-select-placeholder { color: red; } .mat-s ...

cssangularangular-material-5

An illustration of the fundamental concepts of require.js

main.md <markdown> <head> <script data-main="script" src="http://requirejs.org/docs/release/2.1.8/minified/require.js"></script> </head> <body></body> </markdown> script.css defi ...

javascripthtmlrequirejs

How can you determine the dimensions of an image in HTML using Python?

Is there a way to extract image size information from source code using Python? tree = etree.HTML(source_page_text) image_list = tree.xpath('//img[@src]') The 'img' tags with 'src' attributes can be found using xpath as show ...

pythonhtmlcssimagexpath

Transform charset X to Unicode using Java

What is the process to convert a specific charset to unicode in Java? We have discussed charsets extensively, but this particular topic has not been covered yet. I have a hex string that follows the criteria length%4==0 (e.g. \ud3faef8e). Typically, ...

javahtmlcharacter-encoding

One simple fix for removing default focus styles across all browsers

Is there a universal method to disable the default styling of focused elements across all browsers? If not, what are some of the common styles implemented by the most popular browsers? ...

htmlcssbrowsercross-browserfocus

Transfer the contents from the text box field into the <p> tag

I know how to transfer text from one textbox to another in JS, but I'm interested in moving the text from a textbox to a paragraph. Can anyone explain how to achieve this? Thank you Update: Apologies for not being more specific earlier. I'm att ...

javascripthtml

The Chart.js donut chart is not displaying as expected on the HTML page when using

My HTML code is set up to display a donut chart with database records retrieved through a PHP script. The data is successfully fetched and visible in the browser console, but the chart itself is not showing up. How can I resolve this issue? console.lo ...

javascripthtmlchart.js

Angular 9 introduces a fresh approach to compiling alternate components

I am trying to append HTML to a div and have it compile the variables, loops, and all the Angular component elements within the string. The HTML content is being uploaded via a text file. While I am aware that this can be achieved using $compile in Angular ...

htmlangularjsangular

Design a hover zone that allows for interaction without disrupting click events

I am looking to create a tooltip box that appears when hovering over an element, and I want the tooltip to only disappear when the user's mouse exits a specific custom hover area outlined by a vector graphic. My current implementation is working, but ...

javascripthtmlcsssvgmouseevent

My AngularJs code seems to be throwing some errors

I recently started learning Angularjs and here is the code I have written: <!DOCTYPE html> <html> <head> <title>ng-Messages Service</title> <script src='https://ajax.googleapis.com/ajax/libs/jquery ...

htmlangularjsmodel-view-controller

How to implement multiple conditions with ng-if in HTML

I need to implement a button that is visible only for specific index numbers: <tbody data-ng-repeat="(wholesalerIndex, wholesaler) in wholesalers"> <tr> <td> <but ...

javascriptangularjshtml