search

ranbuch / accessibility

add accessibility to your website
MIT License
287 stars 35 forks source link

Icon on ios/Safari not working #24

Closed woodyc79 closed 1 year ago

woodyc79 commented 2 years ago

Hello! On the iPad i always get a fallback to the Emoji with a message "Material Icons font was not loaded". I also tried hosting the font on my own.. but it does not work.

The CSS gets injected in the head, but I think the javascript query about the font does not work there

ranbuch commented 2 years ago

Hi @woodyc79 , sorry for the late response.

Can you provide a link? Also, maybe try to load the Material Icons font before initiating the accessibility script?

ereztaiar commented 2 years ago

This happened to me on chrome 94 on the production build adding 

"icon": {
     "fontFaceSrc": [
                    "https://fonts.googleapis.com/icon?family=Material+Icons"
                ],
                "fontFamily": "Material Icons",
                "fontClass": "material-icons",
                "useEmojis": false
}

to the options resolved my issue

infograf768 commented 2 years ago

Simplest way to solve the issue in the js is correcting the error:

It should be fontFamily:"Material+Icons", and not fontFamily:"Material Icons",

woodyc79 commented 2 years ago

Sorry I lost this out of view ;-) I wrote a webpack configuration that copies the needed files from the node directory into my project and also replaces some of the source code - so its possible to have the accessibility icon at my own sidemenu and also returns always true in "isFontLoaded" ;-)

Thank you for your valuable tips!