Moodle for mobile

Font Awesome in Mobile App

 
Me at the Moodle Moot NZ11
Font Awesome in Mobile App
 

Hi guys

Font Awesome icons are supported as standard in Moodle 3.5.

I'm using the latest version of the Moodle App, but Font Awesome 5 icons do not render correctly.

Is Font Awesome supported in the Mobile App ?

If not, is there a recommended way to add it ?

I've added this to the mobileccsurl in the Mobile theme:

https://use.fontawesome.com/releases/v5.0.13/css/all.css

But it doesn't work - see screenshot.

Anyone else managed this?

Stu



 
Average of ratings: -
Picture of Richard Hall
Re: Font Awesome in Mobile App
 

Hi Stuart,

I've inserted a font-awesome icon into a label and it's showing on the Mobile 3.5 app.

The code that I used was:

         <i class="fa fa-clock-o">&nbsp;</i>10 mins

Hope this helps.



 
Average of ratings: -
Me at the Moodle Moot NZ11
Re: Font Awesome in Mobile App
 

No, it doesn't help, because my post is referring specifically to Font Awesome 5 (your example is fa = Font Awesome 4).  I'm referring to using Font Awesome 5, as with the code below "fab".

Using FA5 is working OK in the browser:

FA5

However, in the Moodle App the images are missing:


What I'm trying to understand is whether the Moodle App "CAN" support Font Awesome 5 ?

Can it support the stacking function ?

...and...

If it can, how would that be enabled ?

Currently I've used the following code, which works great in browsers, but not the Moodle App:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"></script>

 
Average of ratings: -
Picture of Pau Ferrer Ocaña
Re: Font Awesome in Mobile App
Core developersMoodle HQParticularly helpful MoodlersPlugin developers

Hi Stuart,


Moodle web and Moodle apps currently support FontAwesome 4.7.0. However you can add code to support FA > 5.

I think your problem is that you didn't add brands css. If you check this site, you'll see brands are in a separate css file:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/brands.css" integrity="sha384-nT8r1Kzllf71iZl81CdFzObMsaLOhqBU1JD2+XoAALbdtWaXDOlWOZTR4v1ktjPE" crossorigin="anonymous">

You can try that to add support, however I'm not sure why is working on your website (problably 4.7 has any compatibility). Please check it again and check the fontawesome documentation for further help.

Cheers,

Pau

 
Average of ratings: -