font awesome icons not displayed in moodle

Hey there,

I'm using h5p (1.9) im moodle (3.5). It was working pretty good and I like it very much. But after upgrading moodle to version 3.5.1 h5p doesn't display any font awesome icons (for example angle-down or angle-right in accordion). There are only wildcards now. I've tried a lot of things like replacing the h5p-files, upgrading the theme and the whole moodle (to 3.5.1+) but there are no font awesome icons.

I have tried Firefox 61 and Chrome 68.

Beyond h5p font awesome is working without problems in moodle.

I would appreciate any advice for solving this problem.

Thanks

Marcel

Attachments: 
otacke's picture

Hi Marcel!

I am sorry that you're experiencing trouble with H5P. Is there any more information you could give us, e.g. messages in the JavaScript dev console (F12 should open that) or some PHP errors in the server's error log file?

Best,
Oliver

Hi Oliver,
Thank you for your reply.
For now, I have no access to the server php error log. But I hope, the screenshot will help to solve the problem.
The console says:
Failed to load resource: net::ERR_CONTENT_LENGTH_MISMATCH fontawesome-webfont.woff:1
Failed to load resource: net::ERR_CONTENT_LENGTH_MISMATCH fontawesome-webfont.ttf:1
Failed to load resource: net::ERR_CONTENT_LENGTH_MISMATCH fontawesome-webfont.woff2:1

Best
Marcel

Attachments: 
otacke's picture

Hi Marcel!

So the files seem to be loaded (200 messages in the network tab), but their actual length seems to deviate from the content length property that the response header sends. This can have multiple reasons. Is there anything on the server, on the moodle site, or your system that might shape the traffic before it hits H5P? Even adblockers seem to be able to cause this issue.

Cheers,
Oliver

Hey Oliver,

Thanks for your support.
There should be no problem on the server, with the moodle-installation or on the system. I have check this and asked our guys from the infrastructure unit.
I can use all features from h5p except the control icons are not displaying.
There is also no ad blocker running on the system.

This time the console (Firefox) says: “No ajax path found” (xapi-collector.js:101:13).

By the way, it is a very useful tool and make HTML5 contents easy to implement in moodle.

Best
Marcel

otacke's picture

Hi Marcel!

I don't think the error message is related to the icons directly, but the moodle update clearly caused some trouble. Since I really don't know the platform that well, I'll pass this to one of my colleagues.

Cheers,
Oliver

thomasmars's picture

Hi Marcel,

I'm running Moodle 3.5.1+ (Build: 20180817) without any problems.
I haven't been able to reproduce the errors you describe.
When exactly are you getting the error, and which steps did you take to get there ?

What steps did you take to update Moodle ?
Make sure that you follow their upgrade guide, if you were upgrading, or their migration guide if you were migrating exactly,
otherwise you may get similar symptoms like this guy.
Also make sure your server is setup as recommended by Moodle.

Furthermore, which Moodle theme are you running on your site ?
Could there be some conflict with the CSS here ?

To pinpoint what exactly is going wrong it would be nice to see the error, do you have a publicly available page where this is observable ?

Best regards,Thomas

@ Oliver: Thanks for your help! I’ve updated H5P but unfortunately the problem still exists.

Hey Thomas,

Thanks for your assistance.
I’m running moodle 3.5.1+ (Build: 20180803) but my problem exits since moodle 3.5. The theme is boost campus (v3.5-r2 2018073100) from the Ulm University. I don’t think there is a conflict with the theme CSS.

My moodle installation is running without any problems. Any feature is working and so is H5P too. There are no difficulties to use the content types of H5P in moodle except the font awesome icons.
Furthermore, I can use font awesome icons in any moodle course.

You can take look for yourself at:
https://lehrportal.uni-kassel.de/moodle/course/view.php?id=2

Cheers,
Marcel

BV52's picture

Hi Marcel,

I've removed the username/pword for security purposes but we have it on file so that we can check.

-BV52

thomasmars's picture

Hi Marcel,
It looks like something has gone wrong with the font-awesome H5P files when they were uploaded.

Can you try the following steps to resolve it:

1) Set

$CFG->mod_hvp_dev = true;

in your config.php file for Moodle temporarily.

2) upload the font-awesome H5P library through the library administration pages for H5P in Moodle (Make sure it says "Updated 1 library" when you did this). I have attached the font-awesome.h5p library to this post for your convenience.

3) Remove the line in config.php

Try to access the content again and see if this fixes it. Let me know how this goes, if it doesn't fix it there must be some conflict with the fontawesome-webfont.woff2 that you're already loading from maxcdn or a slash argument issue. Either way, let me know how it goes.

Best regards, Thomas

 

Attachments: 

Hey Thomas,

The accordion is working great now. The wildcards are gone in the accordion, but the other content types have still trouble to loading the font awesome icons. for example the timeline

Thank you so much. It is very kind of you, to helping me and solve my problem.

By the way, is it normal that I can’t make any configurations in the installed libraries (see screenshot).


Cheers
Marcel

thomasmars's picture

Hi Marcel,
That's excellent news. It confirms that something went wrong during upload of the fontawesome icons, perhaps while fetching them from H5P.org.
I couldn't find the timeline content that you're referring to, but I suspect this is just a caching issue, your browser is caching the old version of the fontawesome icons which is not working. You should be able to do a refresh without cache by following the instructions found here: https://en.wikipedia.org/wiki/Wikipedia:Bypass_your_cache.

Let me know if it still doesn't work after this and give me an address to the content, and I'll have a closer look.

Best regards, Thomas

Hey Thomas,

Thanks, for your response and sorry for the delay.
The browser cache isn’t a problem.
You can find the content (timeline) under https://lehrportal.uni-kassel.de/moodle/course/view.php?id=10

Cheers,
Marcel

thomasmars's picture

The same things as FontAwesome seems to have happened with TimelineJS, I have attached the library to this post.

Attachments: 

Hey Thomas,

That is very cool! It is working perfect. Thank you for your help!

Is there a place where I can download the libraries in case I have the same difficulties with other content types?

Finally yet importantly, I thank you and the all fellows to create and maintain H5P.

Best regards,
Marcel

BV52's picture

Hi Marcel,

I'm glad it is now working. You can download most the libraries from H5P's Github repository. Contents that were not created by the core team can be downloaded from the developer's repository the links are posted in the respective sample pages of the contents.

-BV52

thomasmars's picture

Regarding your question about if it is normal that you can't make configurations in the installed libraries. Yes, this is normal, you can only restrict libraries that are runnable. Since the other editor libraries are only used if a runnable library requires it.

Best regards, Thomas

Hey Thomas,
After your help, H5P is working pretty well in Firefox. In Chrome, there is still a problem to display the font awesome icons in the accordion.

You can see it here:
https://lehrportal.uni-kassel.de/moodle/course/view.php?id=2

By the way, the content type “timeline” displays the icons without any troubles.

Cheers
Marcel

Attachments: 
thomasmars's picture

Hi, weren't the accordion fixed by re-uploading the font-awesome icons previously ?
I tried the site with firefox, and the accordion is showing without problems. Please make sure you have cleared the cache of your browser properly (ctrl + shift + r, see: https://support.mozilla.org/en-US/kb/keyboard-shortcuts-perform-firefox-tasks-quickly#w_navigation) or clear it through the settings: https://support.mozilla.org/en-US/kb/how-clear-firefox-cache.