Font Awesome icons disappear after refresh in Chrome

Question

Bootstrap version 3

Font Awesome version 3.2.1

I am having issues with bootstrap and font awesome on Chrome. When I originally load a page, the font awesome icons are displayed correctly. When I refresh the page, the icons disappear. **To clarify, the entire icon is missing, this is not the empty box issue that some others encounter.

I'm grasping at straws here, but I noticed there were differences in the order in which the files were retrieved between the original page load and the refresh.

When the page is refreshed, the font file is the last item to be retrieved, and it appears to be a cached version as well.

Finally, any icons that are located inside of a <div class="btn"> will be loaded when the mouse hovers over the div.

Any help would be much appreciated!

Initial page load

Page refresh

Answer 1

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).

Answer 2

I got the same problem in latest verion of chrome (33.0.1750.152) Working solution for me: move styles from body to head section.