Problems with importing in Internet Explorer 11

Currently, I am experimenting with a basic @import to include Microsoft icons. The process works smoothly in Chrome; however, Internet Explorer does not display anything, and no errors are visible.

Check out the example here

Applying Styles

@import "https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css";
.ms-Icon {
font-size:35px;
display:block;
margin:10px auto;
color:red;
border:1px solid black}

HTML Markup

<div>
<i class="ms-Icon ms-Icon--alert"></i>
</div>

I have attempted to also reference the CSS file in JSFiddle, but the issue persists. Although I am aware of the problems related to EOTF formatting in IE9 and below, my browser is IE11, and I cannot find any solution references for this particular problem.

cssimportfontsicons

Answer №1

Although this question may be considered old, I believe it is important to address it now as I recently encountered the same issue with Internet Explorer even after exhausting all possible solutions. It dawned on me that the root cause of the problem lies in hosting the website on a local server, particularly when dealing with IE. Upon further investigation, I realized that my live website displayed fonts correctly, whereas the local version did not. This discrepancy is due to IE's default setting of displaying locally hosted websites (Intranet) in compatibility view mode, resulting in incorrect styling and non-functional imported fonts.

To tackle this efficiently, I utilize IF statements in templates and CSS within my framework to avoid unnecessary server lookups. Here is an example:

In CSS:

/* #IF !$is_msie */
<load font from CDN>
/* #ENDIF */

In HTML:

<!-- #IF $is_msie -->
<load font from domain>
<!-- #ENDIF -->

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

The sidebar is not correctly displaying at full height

Having trouble getting the sidebar to fit perfectly between the header/nav and footer in full height. <html> <head> <meta charset="utf-8"> </head> <body> <header> <div class="header"> & ...

javascripthtmlcss

What is the method for customizing the NavBar color using CSS?

Hi there! I recently came across a responsive multi-level menu that caught my eye. After copying the CSS and JavaScript exactly, I ended up with this NavBar. The issue I'm facing is changing the default color (which is green) to another color. Here&ap ...

jqueryhtmlcss

CSS3 Animation displaying text color change on various elements in a continuous loop

I was attempting to create a dynamic animation where multiple texts change color, similar to what you can see on https://vercel.com. I have successfully figured out how to make one text change color using keyframes, but I am struggling to make each text ch ...

htmlcssreactjs

Bring a div box to life using AngularJS

Struggling to animate a div-Box in AngularJS? Despite trying multiple examples, the animation just won't cooperate. I'm aiming to implement a feature where clicking on a button triggers a transition animation to display the search form. I under ...

javascriptjquerycssangularjs

"Troubleshooting: Why is :last-child not applying styles to my final

I'm encountering an issue in my example where the last </li> doesn't display properly when using :last-child. In the provided code, you can observe that when I target the last element with the class "aa," it shows the "+ Add" text. &.a ...

css

Unable to get the Gtranslate function to function properly within the drop-down menu

Currently, I am using Gtranslate.io languages on my website with flags displayed without a drop-down menu. Everything is running smoothly but now I am looking to enhance the user experience by placing the flags inside a drop-down list. I want English to ...

javascriptjqueryhtmlcss

Achieving hover effects on <a> tags in CSS without using the href attribute

I'm looking to create a picture that changes when hovered over, and I've already achieved this using CSS by adjusting the z-index. However, I don't want users to be able to click on the image. To prevent this, I have removed the href from th ...

cssxhtmlhoverhrefinternet-explorer-6

The email message content is not displaying correctly

I'm in the process of merging multiple HTML tables into a single $message, which will then be passed to the email body as shown below. // Sending the email if(smtp_mail($To,$cc, $Subject, $message, $headers)) { echo "Email Sent"; } else { echo "An ...

htmlcssemailhtml-email

Creating Radial Skills Bars: A Step-by-Step Guide

I'm searching for a helpful tutorial or guide on creating radial skills bars similar to the ones featured on this website. Can anyone point me in the right direction? ...

htmlcss

Attach bread crumbs to the top of the page

I want to attach breadcrumbs to the top of the navbar. Currently, I am developing an application using Angular and Bootstrap 4. app.component.html <nav class="navbar navbar-expand-lg navbar-toggleable-lg navbar-dark bg-dark sticky-top" style="position ...

cssangularbootstrap-4

Is it possible to utilize Javascript object attributes as a designated HTML class?

I have a project where I am utilizing Javascript objects to store data in a table structure, similar to the example below: { name: toast, id: 15, style: small, }, { name: bagel, id: 17, style: medium, }, Is there a way to use the style attribute as ...

javascripthtmlcssvue.js

Timing events in javascript based on frames per second

Currently, I am working on a mini-game that requires some animations to be implemented in the form of frames per second. Here is my current approach: var loadCount = 0; var ticks = 15; function loadingLoop() { loadCount++; } switch (loadCount) { ...

javascripthtmljquerycss

picture located in the top corner of the page within the diva triangle shape

Is there a way to position my photo on the same level as a div and have it overlap slightly? <div id='triangle-topleft'> <img id="photo" src="photo.png"> </div> #triangle-topleft { width: 0; heigh ...

htmlcssimage

Nest two div elements within a parent div with varying margins

When trying to nest two divs inside another div with different margins, the second one always aligns according to the first one. For example, if we have divs named 'first' and 'second', we might want a layout like this: seco ...

htmlcss

What is the best way to display multiple HTML files using node.js?

click here to see the image Here is my server.js file. Using express, I have successfully rendered the list.html and css files on my server. However, I am encountering an issue when trying to navigate from list.html to other html files by entering localho ...

htmlcssnode.jsexpressmariadb

A variety of FlipClock counters with distinctive CSS designs for each

I am facing a challenge with multiple flipclock counters on one page. Adjusting CSS styles for each clock independently is proving difficult, as changes made to the flipclock.css file affect all instances of flipclock counters. After referencing the API d ...

javascriptjqueryhtmlcssflipclock

Can you explain the distinction between a block-level box and a primary block-level box?

According to the specification: Block-level boxes are defined as those participating in a block formatting context. Each block-level element generates a primary block-level box that contains descendant boxes and generated content, serving as the k ...

css

The functionality of the Bootstrap4 accordion is not functioning according to my expectations

My goal is to create a unique e-commerce checkout page design. Each panel would be opened sequentially, with the next panel unfreezing when the action button of the current panel is clicked. However, I seem to be making a mistake as it is not working as in ...

javascriptjquerycsstwitter-bootstrap

Adding Font Awesome to my Angular 12 project within Visual Studio 2019

Seeking a no-frills guide for integrating Font Awesome (free version) into my Angular 12 application within Visual Studio 2019. After countless Google searches, I am bombarded with intricate methods. It's baffling why such complexity exists just to in ...

cssangularvisual-studio-2019font-awesome

Is there a way to adjust the alignment of elements within an HTML Table? I specifically want the Submit button to be placed on the right side without any extra space on the left side

While constructing an HTML table for my Wix site, I've encountered some formatting issues. The left side of the table has excessive spacing, and I can't seem to position the submit button correctly next to the input boxes. Additionally, I'm ...

htmlcss