ElearningWorld.org

For the online learning world

Elearning WorldFontTheme

Most Awesome

Introduction

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>

as we can see on: fontawesome.com/v4.7.0/icon/train and the whole list of icons is searchable here: fontawesome.com/v4.7.0/icons. This looks like this with a label:

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 3.4.0.2 (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>

as we can see on: fontawesome.com/icons/train?style=solid and again the whole list of icons is searchable here: fontawesome.com/icons?d=gallery&m=free. So with a few more icons this now looks like:

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.

And finally….

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.

Gareth Barnard
Latest posts by Gareth Barnard (see all)
blank

Gareth Barnard

Gareth is a developer of numerous Moodle Themes including Essential (the most popular Moodle Theme ever), Foundation, and other plugins such as course formats, including Collapsed Topics.

3 thoughts on “Most Awesome

  • Fantastic explanation of font awesome and the history of how, when, and where it’s been integrated into Moodle.
    Having played around with fontawesome for a while now myself, I think this article is excellent in providing a clear overview for others.
    Great stuff Gareth – thanks !

    Reply
  • As always… funny how it all make sense when giving an examples with Trains 😉

    From a technical pov, Font Awesome seems useful as all the glyphs come together in one file and get cached. Some designers even love them for their uniform color. But, I like SVG better, as they hold various colors, and can be edited by the developer, even though you end up with lots of files.

    Soon, when more and more internet hosting services will support HTTP2, the current technical advantage of sending all the glyphs (the font file) in one piece, will be irrelevant. and maybe SVG will be more popular. my personal wishful thinking.

    Reference: https://tracker.moodle.org/browse/MDL-52751

    Reply
    • Good input Nadav.
      I’m not sure how soon sites will be using http2 – it’s only the last year or so that there has been a big increase in https for the ‘average’ website.

Add a reply or comment...