Font Awesome Icons Disappear After Refresh in Chrome

Font Awesome icons disappear after refresh in Chrome

I guess you are on a Windows machine, right?

This is an old problem with Chrome. See this posting on CSS Tricks. The next to last post should be the answer to your question. Or in short: Use the PUA (Private Use Area) for encoding.

The Unicodes (PUA codes) for each icon are listed in the Font Awesome CSS file - see: Font Awesome uses the Unicode Private Use Area (PUA)... (around line 190).

Font Awesome icons disappear after refresh of browser

The demo page works OK for me (@Isherwood), so there must be something in my project.

The JSFiddle did work ok (@Ivijan Stefan Stipić) but I had to use a CDN to get the .CSS and .JS files in the fiddle.

So it seems that my reference to font-awesome.min.css (Fontawesome is not the same as glyphicons @Doctus) was the issue.

I replaced this with a CDN reference:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

And it works OK now.

Why are my font awesome icons disappearing on page loading?

There's currently an open bug in Chrome regarding web font rendering. See here, here and here.

Font-awesome Pro 5.3.1 disappears after load for all ie browsers ie11,ie10

Looks like some other reported issues, where the Cache-Control no-store was being used with https, causing problems in IE.

If it's an ASP.NET app, try checking Web.config if it has <add name="Cache-Control" value="no-store" />, and try removing it or changing to value="max-age=0", and see if it works.

References:

• https://stackoverflow.com/a/39055984/3211332
• https://stackoverflow.com/a/26594066/3211332

Font-Awesome icons do not display correctly on Chrome for Android

This issue has been resolved in a Chrome for Android update.

Font Awesome icons not showing up (no error in console)

CSS file is not being loaded because you have = char missing in line:

<link rel"stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" media="screen" />

Change it to

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" media="screen" />

I've verified that in firebug and it works.

---

Related Topics