font awesome icon is not appearing in IE 11, but showing in other browsers
I am new to font-awesome icons. I have one page in which there is a filter where user can search the data. I have added font awesome icon just before the search link (as per below screenshot), I can see this icon in all the browsers except IE 11. The funny thing is I have this icon in other pages also and I can see it in IE 11, but I cannot see this icon on this (as per below screenshot) page only.
Here is the screenshot from IE 11:
Here is the screenshot from chrome:
Can anyone help me out on this?
Solution 1:
I had the same issue, I solved it by adding this meta tag as the FIRST tag in <head>:<meta http-equiv="X-UA-Compatible" content="IE=edge">
Also, according to the official documentation, check the following:
For Internet Explorer: you don't serve files with
no-storeoption in Cache-control header (Ref: #6454);
For Internet Explorer and HTTPS: you don't serve files withno-cacheoption in Pragma header.
Solution 2:
IE has an issue with @font-faces being delivered with the HTTP-Header Pragma=no-cache. You can see it recorded on the issue tracker here
Unfortunately the issue is marked as not resolvable but there are some workarounds. The one that worked for me was using a servlet filter that avoids the Pragma header being set.
Other solutions that not worked for me:
Font-awesome disappears after refresh for all ie browsers ie11,ie10,ie9
Font awesome icons becomes invisible in IE after refresh
Solution 3:
From IE console try to run following script
$('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" type="text/css" />');
If it work then try to import it CDN instead of storing it locally.