Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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:

enter image description here

Here is the screenshot from chrome:

enter image description here

Can anyone help me out on this?

like image 570
Rohit Gaikwad Avatar asked Jul 08 '15 11:07

Rohit Gaikwad


People also ask

How do I fix font awesome icons not showing?

If you installed the Free Font Awesome version but try adding Pro icons to your web pages, they won't show. The solution to this is either you use the alternative free icons or upgrade to a Pro subscription/license.

Why are my browser icons not showing?

When you add a favicon to your site, it may not show up since your browser has 'saved' your site as one without a favicon. You need to clear the cache in your browser or use a different browser.

How do I make font awesome icons accessible?

If an icon is not an interactive element The simplest way to provide a text alternative is to use the aria-hidden="true" attribute on the icon and to include the text with an additional element, such as a <span> , with appropriate CSS to visually hide the element while keeping it accessible to assistive technologies.


2 Answers

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-store option in Cache-control header (Ref: #6454);
For Internet Explorer and HTTPS: you don't serve files with no-cache option in Pragma header.

like image 194
Antoine Dusséaux Avatar answered Oct 21 '22 09:10

Antoine Dusséaux


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

like image 13
Josema Avatar answered Oct 21 '22 09:10

Josema