Moodle 3.3 with Font Awesome 5

Re: Moodle 3.3 with Font Awesome 5

by Nick Phillips -
Number of replies: 3

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: -
In reply to Nick Phillips

Re: Moodle 3.3 with Font Awesome 5

by Adrian Perez Rodriguez -

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: -
In reply to Adrian Perez Rodriguez

Re: Moodle 3.3 with Font Awesome 5

by Vlado Planinsek -

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: -
In reply to Vlado Planinsek

Re: Moodle 3.3 with Font Awesome 5

by Adrian Perez Rodriguez -

Hi

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)