IE11 not showing font awesome icons

[tbinggeli]

In some versions of IE11, the font-awesome icons are not showing up. I cannot see them on font awesomes website either.

I see this in the console:

According to WhatIsMyBrowser.com:
WEB BROWSER AND PLATFORM:
Internet Explorer 11 on Windows 10
Their web browser is up to date!

THEIR WEB BROWSER'S CAPABILITIES:
Is JavaScript enabled? Yes
Are Cookies enabled? Yes
Is Flash Installed? Yes - v19.0.0 Out of date

Is Java Installed? Yes - v8.0 update 77 Out of date

MORE INFO ABOUT THEIR SYSTEM:
IP Address 24.119.144.2
Location United States, Boise
(Approximate)
Computer Screen 1920 x 1080 pixels
24 bit
Browser Window Size 1936 x 1056 pixels
"Do Not Track" Setting Not enabled or not supported
Detected Addons Microsoft Silverlight

THEIR WEB BROWSER'S TECHNICAL DETAILS:
Browser version (full) 11.0 Operating System version (full) Windows NT 10.0
Layout Engine Trident Trident Version 7.0
Configured Language English Java version string 1.8.0_77
Browser GMT Offset -06:00 Device Pixel Ratio 1
Geo location Yes Application Cache Yes
CSS Animations Yes HTML5 Video Yes
CSS Box Shadow Yes CSS 3D Transforms Yes
Full Screen No HTML5 Canvas Yes
Session Storage Yes WebGL Yes
Device Orientation Detection No XHR2 No
CSS Gradients Yes CSS Transforms Yes
Device Motion Detection No Indexed DB Yes
CSS Transitions Yes CSS Multiple Backgrounds Yes
SVG Yes Local Storage Yes
HTML5 Audio Yes CSS Font Face Yes
THEIR WEB BROWSER'S USER AGENT:
Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; rv:11.0) like Gecko
This email was sent at 2016-03-24 18:26:39 UTC/GMT

someone suggested that I check this link:
Please check your group policy #8472, but changing my group policy doesn't help.

Please help.

[tagliala]

Cannot replicate, this is probably due to machine specific issues. Please check another machine or reset IE settings as well as group policy restrictions

[tbinggeli]

We have replicated on many computers as well as we have customers calling into us that the icons on our website are not showing up.

We have already checked out group policy restrictions. I have reset my IE settings.

[tagliala]

Reopening and waiting for feedback from other users

Please take a look here: https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting#get-ttfotf-fonts-working-in-ie9

[tagliala]

@tbinggeli webfonts are not working at all on your IE, this is not just Font Awesome

[tbinggeli]

I guess that may be true. FontAwesome are the only webfonts we've added to our site.

So what would you suggest that I try to resolve it on my computer, or tell the customers calling in?

[tagliala]

https://technet.microsoft.com/en-us/library/bb457144.aspx

Please check for Allow font downloads

[tbinggeli]

I have already checked this, and it's set to enabled:

[tagliala]

Just found this in the troubleshooting guide: https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting#fonts-not-rendering-properly-running-windows-10

[tbinggeli]

I have gone through this as well. It's been mentioned above.
On Sat, Mar 26, 2016 at 10:41 AM Geremia Taglialatela <
[email protected]> wrote:

Just found this in the troubleshooting guide:
https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting#fonts-not-rendering-properly-running-windows-10

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#8825 (comment)

[tagliala]

Let me know if you find the source of the issue

[tagliala]

I'm going to close here because it is about all webfonts and it is not specific to FontAwesome

[siraniks]

I tried the solutions here ... and now I found out why it doesn't show because
you didn't include fontawesome-webfont.eot in your /fonts which it was recommended font for IE11

[tagliala]

I tried the solutions here ... and now I found out why it doesn't show because
you didn't include fontawesome-webfont.eot in your /fonts which it was recommended font for IE11

you = font awesome?

[duartebriz]

I would like to send a box full of poop in a shape of the IE logo to Microsoft as a present.

[alcali]

I found the solution. I deleted the version parameter, eg. ?v4.7.0 in every src of the font in the CSS and it is now working in my IE.

[tagliala]

@alcali thanks, I will edit the troubleshooting guide. I really hope that version 5.0.0 will finally get rid of that version strings

Ref: #3286

[osjoberg]

In my test environment I knew it worked with IE 11.0.43, client was running IE 11.0.42. I ran Windows update, 30 minutes later it was also running IE 11.0.43 and the font where showing.

[Stefhe68]

I am Using IE 11.096 with secruity setting "Allow font downloads => Disabled". Now I can not see any Font Awesome Icon anymore and anywhere, not on my own webpage also not here e.g.: http://fontawesome.io/examples/
On my webpage all fonts are local and I think on fontawesome.io the fonts (icons) are local too. But they are not shown with IE11?! All other browsers works fine! Can you help me please to solve this IE11 issue? I tried many hours for nothing. Thank you.

[tagliala]

@Stefhe68 : font awesome is a font. Please consider another solution if you need that security setting

Hope it helps

[netunguito]

Maybe too late or for others looking into a solution for rendering the icons on IE 11, IE has an issue with fonts and cache header Control-Cache and Pragma with the value no-store you have to remove this from your response in order to get them to run. I don't know if this has to do with IE or an old set of fonts or both, probably is mostly the freaking IE. However I hope this helps it did for me.
By the way I found this on: https://stackoverflow.com/questions/31291414/font-awesome-icon-is-not-appearing-in-ie-11-but-showing-in-other-browsers

[tagliala]

@netunguito thanks for sharing this. This information is provided in our Troubleshooting guide, available at https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting#im-hosting-fonts-on-my-server-and-icons-dont-show-up

[MyTechSite]

I know this is a very old post but the solution is to reset the IE11 options by going to:

Tools >> Internet Options >> Advanced Tab

Then click on the Reset button as shown in this picture:

https://i.imgur.com/gXWkDix.png

I had the same problem when working on version 4.70 where all other browsers displayed correctly except IE11 on Windows 10 (1703 15063.502) and so I decided to to use the reset button and voila the icons appeared automatically. You might need to restart the IE but try it anyway.

Hope this helps to some people who are still struggling with this. Also, clients need to reset their options if they complain of icons not displaying. this should be the first thing to do before doing anything. Me thinks so anyway.

[rafecolton]

tl;dr resetting browser settings worked for me. Thanks @MyTechSite!

[tagliala]

Hi guys,

thanks for your feedback.

Please clarify if reset settings works if you are hosting icons or your own server or if you are serving icons from CDN, since IE is affected by different issues and I don't know what to add to the troubleshooting guide

[rafecolton]

@tagliala serving fonts and css from my own server, no CDN. (Currently testing on localhost and serving to IE using ngrok, but that shouldn't matter.)

[MyTechSite]

@tagliala I am also running my own server/local machine for development. I suggest for troubleshooting guide, clients should first try to reset their IE11 settings to defaults so that they can know whether the icons are loading or not. If they are working then they can start start customizing their browser as it was before One tem by one item so that they know which settings is causing the problem.

[kitzilla]

I am not sure why but with the following conditions, IE11 failed to display Font Awesome icons for me

1. FA's CSS is bundled in JavaScript using webpack + style-loader + css-loader AND
2. F12 Developer Tool has been opened before opening the page or during the page is open.

If the CSS was loaded from HTML in the normal way, the icons come up even after I press F12.
If I never touch F12 from the launch of IE11, FA loaded by webpack style loader works fine. (The timing of F12 doesn't seem to matter. It ruined even when I pressed F12 at another website in another tab and closed it and then opened my web page)

It seems IE11 Devtools goes wobbly with @font-face is in CSS injected to HTML by JavaScript.

[gavinr]

For those having this problem, the solution is to make the Windows registry change detailed here (see To turn on and use the Blocking Untrusted Fonts feature through the registry section). After system restart, "untrusted" fonts - including FontAwesome - in IE11 now load.

[tagliala]

Hi again,

please note that IE(11) is affected by different issues.

Also, corporate users might not be able to change their internet settings.

Please use the workaround which better fits your use case

Ref:

• https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting#internet-explorer-11-doesnt-show-icons
• https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting#im-hosting-fonts-on-my-server-and-icons-dont-show-up

[jonas-salomonsson]

For me the problem was that my company failed to add it's new domain to trusted sites in the company pc image policys. After adding it manually it's working.

[jeeyyy]

Having run into this issue, created a library that helps for easier consumption of icons as svg strings.
https://github.com/jkodu/fa-svgs-in-js

[tagliala]

@JKODU thanks for sharing.

So this is not an issue with the SVG Framework used by FA5?

[jeeyyy]

I do not think, this is an issue with the SVG Framework.

When font download is disabled in the browser, there is not much that can be done relying in font based icons.

Have to fallback to alternative ways of injecting icons, and svg has great browser support, which is what I ended up doing with https://github.com/jkodu/fa-svgs-in-js

[zalee]

how to use in react?

[jeeyyy]

import * as faGetIcon from 'fa-svgs-in-js/dist';
const myIcon = faGetIcon('cog');

Reference:
https://zhenyong.github.io/react/tips/dangerously-set-inner-html.html

or you can dom sanitize it.

[maeisabelle]

After several workarounds (cache-control, upgrade to font awesome 5, etc which all has issues), I was able to fix this by using Web Font Loader:

Add this inside the head tag of your index.html

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>

	WebFont.load({
		custom: {
			families: ['FontAwesome'],
			urls: ['//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css']
		}
	});
</script>

[maharjans]

faced similar problem with font awesome 4.7. We ended up going 5.0.13 and seems to work in IE11 and all other browsers.

[medavisjr]

@maharjans If you don't mind me asking, what implementation were you using? SVG with JavaScript, or just a classic web font in CSS? We're experiencing a similar issue with a couple of our sites not loading Font Awesome 4.5 icons in IE11 past the first page load and I'm wondering if upgrading Font Awesome will fix it.

[maharjans]

@Rodalli our app is a ember js app, but we are using plain css for font awesome. Your problem sounds very close to ours, I'd be surprised if the upgrade does not fix it.

[MyTechSite]

Frankly, it is time to move away from IE11 as more and more websites are not supporting it and Microsoft is not developing it either. even GitHub is going to stop supporting it soon. Some of you must have seen this pop up on Github forums:

Please note that GitHub will stop supporting Internet Explorer as of July 2018

[twaelti]

As posted in #8472
We had a customer with this problem. The solution was to make sure that fontdrvhost.exe isn't blocked by the antivirus software (in this case Trend Micro OfficeScan was the culprit).

[rmullaney77]

Side note: Was working on a new design locally (via file://) an fas icons would not show (Win10/IE11), while fab icons did. Not sure if it adds anything to the conversation, but felt it was noteworthy 😉

[hasmanyguitars]

I had this same issue after an IE11 upgrade. I fixed it by adding the registry entry mentioned here: https://docs.microsoft.com/en-us/windows/security/threat-protection/block-untrusted-fonts-in-enterprise#Turn_on_and_use_the_Blocking_untrusted_fonts_feature

I think we'll have to upgrade to v5 with SVG to get around this issue.

[MyTechSite]

@Hasmanguitars,

it is very kind of you to post this but do you not agree that IE11 is almost dead and people should move on and stop wasting time supporting IE11.

Chrome, Firefox and Edge(Chrome) are now the main browsers for most users. I could post a link to support this but I'm sure this is not necessary.

Kind regards,