All geek questions in one place

Materialize css icons not showing in Safari browser

I noticed that the materialized CSS icons do not appear in Safari (v5.1.7 (7534.57.2) . I searched a lot on this subject, but there was no browser compatibility documentation where safari is indicated. Can anyone tell me if this is a bug that needs to be fixed or are there any alternatives to get this working in Safari.

Other browsers

Other browsers

Safari Browser

Safari browser

PS: Other materializecss functions work well except icons

+5
source share
1 answer

I faced the same problem. The following approach helped me:

  • I am having problems with font icons provided by css materialization. It seems that there are some problems with font icons in case you yourself accept it. I will clarify my answer with the exact error number. Therefore, to fix this, I downloaded and used the font icons provided by Google and followed the steps above here .

  • Be sure to add 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'; }

  • One more thing to make sure you use all the google font formats: WOFF2, WOFF, Truetype, EOT, and even SVG, if possible, to ensure browser compatibility.

If you don’t own font icons, just try including the above CSS code. I have not tried this with CDN, but it worked for me for independent font icons. So, let's all find out how everything goes together, so if this is not so, we can try an alternative solution.

+8
source

Source: https://habr.com/ru/post/1245181/

More articles:


All Articles