Moodle in English: Moodle 3.3 with Font Awesome 5

Moodle 3.3 with Font Awesome 5

by Adrian Perez Rodriguez - Thursday, October 19, 2017, 8:36 PM

Dear community

I'm looking to integrate the new styles of "Font Awesome 5" into moodle. But in moodle I must replace all "fa" entries with "fal" for the light style of Font Awesome. Is there something planned in future, for use these different styles?

At the moment our productive moodle 3.2.5 is running with LineAwesome support, but the thing is, that in 3.3 the FontAwesome are in moodle integrated. After the update from 3.2.5 to 3.3 the icons (overwritten by Line Awesome) are not displayed correct (needs some css).

I need to decide which way we're going right now. The best approach would be to take what the moodle core has, but we want the light style.

When you desire I can upload some screens, so you can see how it looks like!

Thanks for any tips and help!

Kind regards
Adrian

Re: Moodle 3.3 with Font Awesome 5

by Nick Phillips - Wednesday, May 16, 2018, 9:17 AM

I'd be interested to know how you've got on - I'm looking to use Fontawesome Pro 5, and it seems the inclusion of FA is really poorly implemented at the moment - the files are stored in /lib/fonts, but the stylesheet to be used has to be copied (and slightly modified) into the theme's styles subdirectory.

This stuff really needs to be pluggable as-is, to enable use of any version of FA (4, 5 or newer, free or pro) just by unpacking the FA download into the right place. Otherwise it's way too hard to use Pro, which is a pain for users and rude to the developers of FA itself.

Personally I'd like to see this (and bootstrap & other similar stuff) completely outside of themes - a plugin to install, which a theme can depend on if desired.

Average of ratings: -

Re: Moodle 3.3 with Font Awesome 5

by Adrian Perez Rodriguez - Wednesday, September 19, 2018, 3:13 PM

Hi @Nick

We're using now in our own Boost theme (based on core boost) the FA5-Light font-family. What we have done is to override the default Moodle font-family in the theme. With this hack, we've now moodlewide the FA5-Light icons in use.

We don't change any CSS class attributes or other code in the core.

Please let me know if you need more information.
Adrian

Average of ratings: -

Re: Moodle 3.3 with Font Awesome 5

by Vlado Planinsek - Thursday, October 25, 2018, 5:08 AM

Hi Adrian,

Please let me know how you did that hack with font-family in the theme? I’m using Lambda theme, moodle 3.5.

Regards,

Vlado

Average of ratings: -

Re: Moodle 3.3 with Font Awesome 5

by Adrian Perez Rodriguez - Thursday, October 25, 2018, 2:30 PM

We import the FontAwesome CSS files with SCSS into our theme. So we renamed the original files to SCSS and make adaptions to the URL paths. After they're all imported together in to the scss/fontawesome-pro/fontawesome-pro.scss file:

@import "fontawesome-pro-core";
@import "fontawesome-pro-brands";
@import "fontawesome-pro-light";
@import "fontawesome-pro-regular";
@import "fontawesome-pro-solid";
@import "fontawesome-pro-svg-framework";

This file will then be imported into the theme (normally you have a SCSS collecting all your customization):

@import "fontawesome-pro/fontawesome-pro";

What you must fix additionally is the scss/fontawesome-pro/fontawesome-pro-solid.scss file, here you change:

.fa,.fas{font-family:'Font Awesome 5 Solid';font-weight:900} 

to 

.fa,.fas{font-family:'Font Awesome 5 Light' !important}

This is the "hack" to get all icons within Moodle with the FA Light style.

Hope this helps.
Adrian

Average of ratings:Useful (1)

Accessibility and usability

Moodle 3.3 with Font Awesome 5