font-awesome is not working properly on second loa

Question

I have an issue in angular 2 where we are using font-awesome for the styling and font. On local it is working as expected but when we deploy the code it is working on first load but when you refresh the page then it removes all the styles and behave differently.

Answer 1

This issue is probably due to caching problems. Here, you can find a little documentation about Font-Awesome troubleshouting : https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting

Check the following:

You properly configured server's MIME types (Ref: #5559);

You properly configured Cross-origin Resource Sharing (CORS);

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;

For Internet Explorer: try to get rid of the query strings inside the @font-face definitions. You need a custom css file (Ref: #3286).

Try the Internet Explorer Compatibility Mode as well :

This feature will cause some random issues with IE, so please disable it by adding the meta tag as the FIRST tag in your : <meta http-equiv="X-UA-Compatible" content="IE=edge">