实现css图标不会显示在Safari浏览器中 [英] Materialize css icons doesn't show up in Safari browser
问题描述
我注意到实体化CSS
图示并未显示在 Safari(v5.1.7(7534.57.2)
。很好地搜索了很多关于这个主题,但没有任何文档的浏览器兼容性safari已列出。任何人都可以让我知道,如果这是一个错误,需要修复或有任何替代方案,使这项工作Safari。
其他浏览器
PS:
materializecss
的其他功能b $ b
我遇到了完全相同的问题。以下方法帮助我:
- 我遇到了materialize css提供的字体图标的问题。似乎有一些问题的字体图标的情况下,如果你是自托管它。我将更新我的答案与确切的错误号。为了解决这个问题,我下载并使用了Google提供的字体图标,并按照这里提到的步骤操作
<$ c> $ c> .material-icons {
font-family:'Material Icons';
font-weight:normal;
font-style:normal;
font-size:24px; / *首选图标大小* /
display:inline-block;
line-height:1;
text-transform:none;
letter-spacing:normal;
word-wrap:normal;
white-space:nowrap;
direction:ltr;
/ *支持所有WebKit浏览器。 * /
-webkit-font-smoothing:antialiased;
/ *支持Safari和Chrome。 * /
text-rendering:optimizeLegibility;
/ *支持Firefox。 * /
-moz-osx-font-smoothing:grayscale;
/ *支持IE。 * /
font-feature-settings:'liga';
}
-
另一件事要确保使用google提供的所有字体格式:WOFF2,WOFF,Truetype,EOT甚至SVG,以确保跨浏览器兼容性。
如果你不是自主的字体图标,只是尝试包括上述CSS代码。我没有尝试这与CDN,但它确实为我自己的托管字体图标工作。所以让我们都知道事情的发展方向,所以如果没有,我们可以尝试一些替代解决方案。
I noticed that materialized CSS
icons does not show up in Safari (v5.1.7 (7534.57.2)
. Well searched a lot on this topic but there haven't been any documentation on browser compatibility where safari has been listed. Could anyone let me know if this is a bug which needs to be fixed or are there any alternatives to get this work in Safari.
Other browsers
Safari Browser
PS:Other functionalities of
materializecss
works well except icons
I faced the exact same issue. The following approach helped me:
- I was facing problems with the font-icons provided by materialize css. There seems to be some problem with the font-icons in case if you are self-hosting it. I will update my answer with the exact bug number. So to fix it I downloaded and used the font-icons provided by Google and followed the steps mentioned over here.
Be sure to append the following to your CSS:
.material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ font-feature-settings: 'liga'; }
Another thing to make sure is to see to it that you are using all the font formats provided by google: WOFF2, WOFF, Truetype, EOT and even SVGs if possible to ensure cross browser compatibility.
In case if you are not self hosting the font-icons, just try including the above mentioned CSS code. I haven't tried this with CDN but it did work for me for self-hosted font-icons. So let us all know how things work out, so that in case if it doesn't, we can try some alternate solution.
这篇关于实现css图标不会显示在Safari浏览器中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!