我的font-awesome图标在Firefox和Chrome中运行良好,但在Safari中,我只看到其中一些图标有空白,而其他图标则没有。屏幕截图:
font-awesome
正如您所看到的,fa-twitter、fa-instagram和其他图标没有显示,无论是在Font Awesome网站上,还是在我尝试将它们与<i class="fa fa-instagram"></i>一起使用时。真的很奇怪,我已经清理了我的缓存十几次,不能找出还有什么可能出错。有什么想法吗?
fa-twitter
fa-instagram
<i class="fa fa-instagram"></i>
vsnjm48y1#
可能还有另一个问题在起作用--我也遇到过类似的问题,自定义生成的图标集(使用字体自定义)会在Chrome、Firefox和一些版本的Safari中显示,但在iOS版本中不会显示。我确保我没有启用弹出窗口拦截器,但仍然遇到这个问题。通过一些研究,我发现将此属性添加到图标字体的CSS中可以解决这个问题:
text-rendering: optimizeLegibility;
添加此属性后,在所有浏览器中的呈现都可以正常工作。
u5i3ibmn2#
您是否在Safari中安装了广告拦截插件?根据字体真棒文档,社交网络的图标可以用这样的插件阻止.
ergxz8rk3#
Safari似乎阻止了未签名的字体。使用具有完整性的CDN可以解决这个问题:字体真棒,我用下面的链接,我发现在: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">
gcxthw6b4#
你使用的是最新版本的Chrome吗?他们现在有一个定制版本的web-kit,一个叫做Blink的分支,所以即使他们在Chrome中显示,现在,你可能需要检查另一个web-kit浏览器来确定。还有,可怕的IE是什么?它们在那里显示吗?我通常必须真正“重置Safari”,而不是仅仅清除该高速缓存才能真正清除缓存!
ux6nzvsh5#
试试这个,我很喜欢.
@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; }
1rhkuytd6#
在我的情况下,我有错误的字体家族的品牌图标。我的旧CSS:
font-family: "FontAwesome";
我的新(工作)CSS:
font-family: "Font Awesome 5 Brands"; font-weight: 900;
这应该有助于任何人谁是使用旧代码和有问题显示品牌图标(推特,Facebook等)
iq3niunx7#
尝试清除您的缓存,我有这样的事情发生在我身上一次之前,它是固定的后,我清除我的缓存(我用的是Chrome浏览器虽然)。
j0pj023g8#
我发现,如果有一个覆盖svg样式的width: auto; height: auto,svg(或字体真棒图标)将不会显示在Safari中。设置宽度和高度值或使用width: inherit; height: inherit
width: auto; height: auto
width: inherit; height: inherit
mfpqipee9#
我知道已经过去很多年了,但是对于仍然处理这个问题的任何人来说,您只需在href of之前:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
之后:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css?v=1234" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
感谢@animaster提供答案:www.example.comhttps://github.com/FortAwesome/Font-Awesome/issues/7770#issuecomment-346301072
9条答案
按热度按时间vsnjm48y1#
可能还有另一个问题在起作用--我也遇到过类似的问题,自定义生成的图标集(使用字体自定义)会在Chrome、Firefox和一些版本的Safari中显示,但在iOS版本中不会显示。我确保我没有启用弹出窗口拦截器,但仍然遇到这个问题。
通过一些研究,我发现将此属性添加到图标字体的CSS中可以解决这个问题:
添加此属性后,在所有浏览器中的呈现都可以正常工作。
u5i3ibmn2#
您是否在Safari中安装了广告拦截插件?
根据字体真棒文档,社交网络的图标可以用这样的插件阻止.
ergxz8rk3#
Safari似乎阻止了未签名的字体。使用具有完整性的CDN可以解决这个问题:
字体真棒,我用下面的链接,我发现在:https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css
gcxthw6b4#
你使用的是最新版本的Chrome吗?他们现在有一个定制版本的web-kit,一个叫做Blink的分支,所以即使他们在Chrome中显示,现在,你可能需要检查另一个web-kit浏览器来确定。
还有,可怕的IE是什么?它们在那里显示吗?
我通常必须真正“重置Safari”,而不是仅仅清除该高速缓存才能真正清除缓存!
ux6nzvsh5#
试试这个,我很喜欢.
1rhkuytd6#
在我的情况下,我有错误的字体家族的品牌图标。
我的旧CSS:
我的新(工作)CSS:
这应该有助于任何人谁是使用旧代码和有问题显示品牌图标(推特,Facebook等)
iq3niunx7#
尝试清除您的缓存,我有这样的事情发生在我身上一次之前,它是固定的后,我清除我的缓存(我用的是Chrome浏览器虽然)。
j0pj023g8#
我发现,如果有一个覆盖svg样式的
width: auto; height: auto
,svg(或字体真棒图标)将不会显示在Safari中。设置宽度和高度值或使用
width: inherit; height: inherit
mfpqipee9#
我知道已经过去很多年了,但是对于仍然处理这个问题的任何人来说,您只需在href of
之前:
之后:
感谢@animaster提供答案:www.example.comhttps://github.com/FortAwesome/Font-Awesome/issues/7770#issuecomment-346301072