FontAwesome Icons are not rendered correctly on Mobile Device

[ste_learn]

Hi there,

when accessing the Course Curriculum on a mobile device the font-awesome icons are not rendered at all. They all are shown as squares. The icons are also not rendered if the course item is accessed.

This is true for all Browser like Opera, Chrome and Firefox as well as Dolphin and Puffin. The devices I used had Android 7.1.2 with the latest Browsers and Android 4.1.2 running old Browsers.

Any Desktop Browser on my Computer shows the icons just fine, even in Developer Console using Mobile Device Emulators. Thus you really have to check it on mobile device instead of an Emulator.

Right now, I have no idea where this problem comes from or if anyone else has the same problem.

Also on small devices (360x640px) the “Back to course” button is pushed down into the content as of the course title. The button get pushed further into the content when the sections column is toggled to be shown.

Note: On my website I have lot’s of font-awesome icons that get rendered perfectly in the above mentioned browser. Maybe it has to do how font-awesome is called out of Learnpress. And of course it might conflict with my themes font-awesome, but I guess many other users have a theme that provides font-awesome either.

Would be nice if you guys could take a look into it, as this doesn’t look nice.

Thanks,
Stephan

[Anonymous]

Dear s_szugat,

I’m so sorry about that.

With this case, we need access to your wp-admin to check more carefully. Can you give me your site access info, using access information?

Look forward to hearing from you.

Best regards,

Huyen Anh

[ste_learn]

Hi there,

thanks for taking the time and looking into my system.

I checked with the other plugins that have font-awesome themselves, but it seems there is no conflict with any font-awesome they use.

Please let me know, whatever you do or change on my installation, if you change anything at all.

Best,
Stephan

[Anonymous]

Dear s_szugat,

I checked and the reason is due to Local Font Awesome plugin.

I deactivated this plugin and your icon is working now.

Please check it out.

Best regards,

Huyen Anh

[ste_learn]

Hi there,

well, that was my first check and it isn’t the problem.

I just checked the course curriculum page on my mobile and no the font-awesome icons are not shown there. The cache of the browser had been empty as well as the WordPress cache.

Thought, that isn’t the problem.

Best,
Stephan

[ste_learn]

The browser I’m testing it with is Chrome 75.0.3770.101 for Android 7.1.2 on a fairphone 2.
And the Firefox browser did not show them either.

And the problem isn’t caused by any other plugin with font-awesome (I already deactivated them to check).

It must be some kind of browser support.

Thanks,
Stephan

[ste_learn]

BTW changing the theme doesn’t help either.

[Anonymous]

Dear s_szugat,

The reason is due to Local Font Awesome plugin and the theme that you’re using.

Because, I activated the theme default and deactivated Local Font Awesome plugin, the icon is working normal http://prntscr.com/odjp5l

So with this issue, you should contact with the main author of the theme. Hope they’ll help you solve it.

Best regards,

Huyen Anh

[ste_learn]

Hm, did all the tests before, but didn’t found the cause in the theme.
I’ll check back with them.

Thanks,
Stephan

[ste_learn]

Thanks for your help.
I just needed to point the Local FontAwesome Plugin to the correct files, now it works as it should.

Best,
Stephan

[Anonymous]

Dear s_szugat,

I hope you were satisfied with our plugin as well as the level of service we provided. If you are happy with the plugin & our services, please consider to rate 5 stars for our plugin here: https://wordpress.org/support/plugin/learnpress/reviews/?rate=5#new-post

I very appreciate your help.

If you need any assistance about our LMS items, please let me know.

Best regards,

Huyen Anh

 

[Author]

Posts