Font Awesome icons not working in OSX Safari

Question

My font-awesome icons are working fine in Firefox and Chrome, but in Safari I just see blank space for some of them but not others. Screenshot:

As you can see, the icons for fa-twitter, fa-instagram and others just aren't showing up, either on the Font Awesome website or when I try to use them with <i class="fa fa-instagram"></i>.

Really bizarre, I've cleared my cache a dozen times and can't figure out what else could be going wrong here.

Any ideas?

Answer 1

There may be another issue at play--I was having a similar issue where a custom-generated icon set (using Font Custom) would display in Chrome, Firefox, and some versions of Safari, but no versions of iOS. I made sure I had no popup blockers enabled, but still was experiencing the issue.

Through a bit of research, I found that adding this property to the icon font's CSS fixed the issue:

text-rendering: optimizeLegibility;

After this property was added, rendering in all browsers worked fine.

Answer 2

Do you have an ad blocker plugin installed in Safari?
According to the Font Awesome documentation, icons of social networks can be blocked with such plugin.

Answer 3

Are you using the latest version of Chrome? They now have a customized version of web-kit, a branch called Blink so even though they show in Chrome, nowadays, you might need to check in another web-kit browser to be sure.

Also, what the dreaded IE? Do they show there?

I usually have to actually 'Reset Safari' instead of just clearing the cache to actually, clear the cache!

Answer 4

It seems Safari blocks unsigned fonts. Using CDN with integrity resolves the issue:

For font awesome I used below link which I found at: https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

Answer 5

Try this. It works for me.

@font-face {
    font-family: 'FontAwesome'; 
    src: url('../fonts/fontawesome-webfont.eot?v=4.4.0'); 
    src:url('../fonts/fontawesome-webfont.eot #iefix&v=4.4.0') format('embedded-opentype'), 
        url('../fonts/fontawesome webfont.woff2?v=4.4.0') format('woff2'), 
        url('../fonts/fontawesome webfont.woff?v=4.4.0') format('woff'),
        url('../fonts/fontawesome webfont.ttf?v=4.4.0') format('truetype'),
        url('../fonts/fontawesome webfont.svg?v=4.4.0#fontawesomeregular') format('svg'); 
    font-weight: normal; 
    font-style: normal;
}

Answer 6

In my case I had the wrong font family for brand icons.

My old CSS:

font-family: "FontAwesome";

My new (working) CSS:

font-family: "Font Awesome 5 Brands";
font-weight: 900;

This should help anyone who is using old code & has issues displaying brand icons (Twitter, Facebook etc)

Answer 7

Try clearing your Cache, I have had this happen to me once before and it was fixed after I cleared my Cache (I was using Chrome though).