Font-awesome: IE11 not showing font awesome icons
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.
tbinggeli
All 44 comments
Cannot replicate, this is probably due to machine specific issues. Please check another machine or reset IE settings as well as group policy restrictions
tagliala
on 24 Mar 2016
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.
tbinggeli
on 24 Mar 2016
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
on 24 Mar 2016
@tbinggeli webfonts are not working at all on your IE, this is not just Font Awesome
tagliala
on 24 Mar 2016
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?
tbinggeli
on 24 Mar 2016
https://technet.microsoft.com/en-us/library/bb457144.aspx
Please check for Allow font downloads
tagliala
on 24 Mar 2016
I have already checked this, and it's set to enabled:
tbinggeli
on 24 Mar 2016
Just found this in the troubleshooting guide: https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting#fonts-not-rendering-properly-running-windows-10
tagliala
on 26 Mar 2016
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
https://github.com/FortAwesome/Font-Awesome/issues/8825#issuecomment-201889085
tbinggeli
on 26 Mar 2016
Let me know if you find the source of the issue
tagliala
on 26 Mar 2016
I'm going to close here because it is about all webfonts and it is not specific to FontAwesome
tagliala
on 26 Mar 2016
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
siraniks
on 20 Feb 2017
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?
tagliala
on 20 Feb 2017
I would like to send a box full of poop in a shape of the IE logo to Microsoft as a present.
duartebriz
on 23 Feb 2017
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.
alcali
on 25 Apr 2017
@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
tagliala
on 31 May 2017
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.
osjoberg
on 12 Jul 2017
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.
Stefhe68
on 12 Jul 2017
@Stefhe68 : font awesome is a font. Please consider another solution if you need that security setting
Hope it helps
tagliala
on 12 Jul 2017
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
netunguito
on 19 Aug 2017
@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
tagliala
on 19 Aug 2017
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.
MyTechSite
on 28 Sep 2017
tl;dr resetting browser settings worked for me. Thanks @MyTechSite!
rafecolton
on 29 Sep 2017
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
tagliala
on 29 Sep 2017
@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.)
rafecolton
on 29 Sep 2017
@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.
MyTechSite
on 30 Sep 2017
I am not sure why but with the following conditions, IE11 failed to display Font Awesome icons for me
- FA's CSS is bundled in JavaScript using webpack + style-loader + css-loader AND
- 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.
kitzilla
on 26 Oct 2017
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.
gavinr
on 30 Oct 2017
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
tagliala
on 30 Oct 2017
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.
jonas-salomonsson
on 18 Dec 2017
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
jeeyyy
on 15 Jan 2018
@jkodu thanks for sharing.
So this is not an issue with the SVG Framework used by FA5?
tagliala
on 15 Jan 2018
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
jeeyyy
on 21 Jan 2018
how to use in react?
zalee
on 28 Jan 2018
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.
jeeyyy
on 28 Jan 2018
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>
maeisabelle
on 15 Feb 2018
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.
maharjans
on 22 May 2018
@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.
rodalli
on 31 May 2018
@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.
maharjans
on 31 May 2018
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
MyTechSite
on 1 Jun 2018
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).
twaelti
on 26 Sep 2018
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 😉
rmullaney77
on 4 Oct 2018
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.
hasmanyguitars
on 29 Jan 2020
@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,
MyTechSite
on 29 Jan 2020
Related issues
omnimint
·
3Comments
seppestas
·
3Comments
tdolph
·
3Comments
ufoczek
·
3Comments
ojvribeiro
·
3Comments
Most helpful comment
I would like to send a box full of poop in a shape of the IE logo to Microsoft as a present.