Some font awesome icon not rendering in Safari

Question

I am using Font Awesome icons. All the icons are rendering in Chrome perfectly.

But in Safari, "some icons" are not rendering. When i say it is not rendering, it is not the usual square boxes. its more like the css visibility-hidden for the icon.

When i change any property of the icon in developer tools, then the icon shows up. This is the behavior in desktop.

In Ipad also, when i change a property, it shows up. Also, all the icons render perfectly fine while in landscape mode. But in portrait mode, some icons do not show up. I have to change the orientation to landscape and then back to portrait to render the icons.

Not sure how to fix it?

Answer 1

I'm targeting Font Awesome 4.2.0, hosting locally on an IIS web server.

Oddly what I found was that suffixing the path to the Font Awesome CSS library with a cache buster fixed the issue. eg

font-awesome.min.css?v=1234

Answer 2

You can add "text-rendering" CSS property for icon font's.

text-rendering: optimizeLegibility;

The browser emphasizes legibility over rendering speed and geometric precision. This enables the use of special kerning and optional ligature information that may be contained in the font file for certain fonts.

Answer 3

When i faced the same issue i found that this may be happening in safari if you have adblocker plugin installed because font-awesome documentation clearly states that this plugin may block some font-awesome icons.

You may check this but for me this plugin was not installed so i found the second solution and it worked for me.

Try using this in your css

text-rendering: optimizeLegibility;