When the Bootstrap theme was initially introduced into Moodle by Bas Brands and David Scotson (moodle.org/plugins/pluginversions.php?plugin=theme_bootstrap the earliest being 27th September 2012) it came with the 140 GlyphIcons in the Bootstrap framework version 2.3.x – getbootstrap.com/2.3.2/base-css.html#icons. It was put into core by tracker.moodle.org/browse/MDL-38016. With the arrival of Font Awesome 21st August 2012 – en.wikipedia.org/wiki/Font_Awesome – by Dave Gandy. The first contributed theme to incorporate it I believe was Essential on the 20th May 2013 (github.com/eduridden/moodle-theme_essential/commit/d09f6b35dc5668b46797e611467b7629b44c5821#diff-980d14c0c85495b48b9a9134658e6121). A request for it to be put in core was made on tracker.moodle.org/browse/MDL-40759 18th July 2013 and accomplished some four years and ten months later in Moodle 3.3 at version 4.7.0 with 675 icons (fontawesome.io/icons). And there it has remained. Contributed themes can clearly update quicker, and this is where this post really came from in my mind.
Font Awesome 5 now comes in two versions, the free and the pro – fontawesome.com. At version 5.0.6, the free has 929 and the pro 1387. So I started to look at how I could practically add the new version with my Shoelace and Essential themes and have made progress. But before I describe its use I think we should consider why we want to use an icon font in the first place….
Why use an icon font?
Sometimes words are too pictorially lengthy to convey the meaning you are communicating for the given space available. At other times you want to provide communication that transcends linguistic boundaries. Just like music can be universal in its understanding because it is a different ‘protocol’, so can icons convey meaning in their own interpreted way.
Icon fonts themselves differ from actual image based icons that you can get from websites like www.iconfinder.com because they are an actual font. This means that they are from the computers perspective ‘characters’ and therefore can only have one colour. But this does mean that as a font the file size is small and they are scale-able. If you need icons with many colours, then you need to stick with images.
So, how can I use FontAwesome in Moodle?
Since Moodle 3.3 FontAwesome 4.7.0 has been built in and therefore available for any theme to use. Before this you needed to have a theme that supported it, like my Essential and Shoelace themes. To use the icons, all you need to do is add markup to the editor of anything you’re editing, like a label. The markup you can get by looking at the icon on the documentation, for instance a ‘train’ is:
<i class="fa fa-train" aria-hidden="true"></i>
after being generated by:
But before adding the icons, the best thing to do is to write the text first, then go into HTML mode with the ‘</>’ button and insert the icon markup in the place you want. This does mean that you’ll need to understand a bit about the structure of HTML first. However if that feels scary, then do feel free to try out Usman’s filter: moodle.org/plugins/filter_fontawesome.
But what about version 5 I hear you say? Well in Shoelace version 184.108.40.206 (moodle.org/plugins/pluginversion.php?id=16031) for Moodle 3.4 I have utilised the core icon system functionality to provide a means of supporting version 5 free. All being well I intend to update the Essential theme too but it is a bit more involved with providing code that updates the settings with FontAwesome values.
After you have installed a copy of Shoelace then adding the icons is the same as before, only with slightly different markup. This is because of changes to FontAwesome itself. Thus with the previous example we look at the ‘train’ icon it is now:
<i class="fas fa-train"></i>
after being generated by:
This is the first time I’ve done these modifications, so clearly there could be some issues and feedback is welcome.
What do you think? Are icon fonts a good thing? Should core Moodle update to version 5 as soon as possible?
And if everything works as hoped then I may back-port the upgrade to Moodle 3.3 for Shoelace and Essential.
Latest posts by Gareth Barnard (see all)
- Customising H5P in Moodle using the Foundation theme – 16th September 2019
- Software – 16th August 2019
- Essential to Foundation, theme evolution – 16th July 2019