Font awesome icons disappear on android phone

  • Effective Chinese is a Mandarin Language website used to improve your language skills. We use Font Awesome silhouette icons, in the first column. When the user clicks on on the icon, the user will hear the pronunciation of the sentence in Mandarin. Sadly, when used on a mobile phone, the icons disappear. I used “Remove existing Font Awesome” and it seemed to have worked, but not really. If I scrunch up the window (to simulate a hand-held device) the icon is now visible, however when I view it on my android phone, there are no icons. Do you have any suggestions for fixing this? Thanks!

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Author mlwilkerson

    (@mlwilkerson)

    Hello, it looks like you may be using a different plugin, rather than this one. Are you using the Better Font Awesome plugin? It looks like, based on your page source, and your description of “Remove existing Font Awesome.” (That’s not a phrase that occurs in this plugin).

    When I look at your site’s page source, it looks like that other plugin is adding something to your page with an identifier of “bfa-font-awesome-css”. When I’ve seen “bfa” before, it’s been an abbreviation for Better Font Awesome.

    Also looks like you’re loading a separate version of Font Awesome with something using the identifier of “asoft-custom-critical-css”. Does that sound familiar?

    I’m not able to help with troubleshooting that other plugin, or this “asoft” CSS.

    However, my guess as to what’s happening, based the description you gave about the behavior, is that whatever this “asoft-custom-critical-css” is, it has some responsive layout rules that change what or whether its icon font is loaded when the page layout is narrower. If that’s the root cause, then you’d need to follow up with the software vendor who makes that custom CSS to find out why the icons disappear at smaller sizes.

    Unfortunately, because they are using custom CSS like that, I think you’ll have an especially difficult time trying to add any different versions of Font Awesome to your site than what “asoft” is trying to load, without either breaking “asoft” or breaking whatever else you try to add.

    If “asoft” is not essential for your website, you could remove it altogether, and load a more current version of Font Awesome more cleanly, such as by using this plugin.

    I hope this helps with your troubleshooting.

Viewing 1 replies (of 1 total)
  • The topic ‘Font awesome icons disappear on android phone’ is closed to new replies.