CSS Font Awesome 图标在 OSX Safari 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22751758/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Font Awesome icons not working in OSX Safari
提问by JVG
My font-awesomeicons are working fine in Firefox and Chrome, but in Safari I just see blank space for some of them but not others. Screenshot:
我的font-awesome图标在 Firefox 和 Chrome 中运行良好，但在 Safari 中，我只看到其中一些图标有空白，而其他图标则没有。截屏：
As you can see, the icons for fa-twitter, fa-instagramand 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>.
正如你所看到的，对于图标fa-twitter，fa-instagram和其他人只是没有显示出来，无论是在字体真棒网站或当我尝试与使用它们<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?
有任何想法吗？
回答by karolus
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.
可能还有另一个问题——我遇到了一个类似的问题，即自定义生成的图标集（使用自定义字体）将显示在 Chrome、Firefox 和某些版本的 Safari 中，但没有显示在 iOS 版本中。我确定我没有启用弹出窗口阻止程序，但仍然遇到问题。
Through a bit of research, I found that adding this property to the icon font's CSS fixed the issue:
通过一些研究，我发现将这个属性添加到图标字体的 CSS 解决了这个问题：
text-rendering: optimizeLegibility;
After this property was added, rendering in all browsers worked fine.
添加此属性后，所有浏览器中的渲染都可以正常工作。
回答by transistor
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.
您是否在 Safari 中安装了广告拦截器插件？
根据 Font Awesome 文档，可以使用此类插件阻止社交网络的图标。
回答by Farshad Javadi
It seems Safari blocks unsigned fonts. Using CDN with integrity resolves the issue:
Safari 似乎阻止了未签名的字体。使用具有完整性的 CDN 解决了该问题：
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
对于字体真棒，我使用了以下链接，我在以下位置找到了：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">
回答by E Allison
In my case I had the wrong font family for brand icons.
就我而言，我的品牌图标字体系列是错误的。
My old CSS:
我的旧 CSS：
font-family: "FontAwesome";
My new (working) CSS:
我的新（工作）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)
这应该可以帮助任何使用旧代码并且在显示品牌图标（Twitter、Facebook 等）时遇到问题的人
回答by Shankar M
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;
}
回答by kelly johnson
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.
您使用的是最新版本的 Chrome 吗？他们现在有一个定制版本的 web-kit，一个叫做 Blink 的分支，所以即使它们显示在 Chrome 中，现在，你可能需要检查另一个 web-kit 浏览器来确定。
Also, what the dreaded IE? Do they show there?
另外，可怕的IE是什么？他们在那里展示吗？
I usually have to actually 'Reset Safari' instead of just clearing the cache to actually, clear the cache!
我通常必须实际“重置 Safari”，而不仅仅是清除缓存来实际清除缓存！
回答by John
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).
尝试清除您的缓存，我以前遇到过这种情况，并且在我清除缓存后修复了它（虽然我使用的是 Chrome）。
