Font Awesome and Moodle, Part 2 – Icons

Let’s clarify what Font Awesome is, and why you might use it in Moodle.

(Link to Part 1 of this series)

In this series of posts, we are exploring how you can use Font Awesome in your Moodle courses.

Font Awesome gives you scalable vector icons that can instantly be customised – size, colour, rotation, drop shadow, and anything that can be done with the power of CSS (Cascading Style Sheets).

We use Font Awesome for the graphics within each section (Topic/Week) heading area in many of our courses – often with a simple layering effect e.g. colour box, with smaller icon inside (more about this later).

That’s because Font Awesome is … errrr … a Font !  Think of it more like Wingdings or some other font you may have used before to get little symbols in your text.

Slight complication

Note that some Moodle Themes use Font Awesome 4, but some may support Font Awesome 5.

You need to check that the Theme you are using supports Font Awesome 4. If it doesn’t then what we are showing you here will not work (although there is a way for Moodle administrators to add support in the background)..

Currently the Moodle Mobile App supports Font Awesome 4, so that is what we will use in this course (for now). When the time comes for you to use Font Awesome 5 don’t worry – 99% of what you learn using Font Awesome 4 will still be relevant 🙂

Consistency is a key factor here

As teachers we’ve all had the experience of trying to locate a set of icons/images that we can use within our courses (for free usually). And while you might be able to locate a good icon set with a couple of dozen icons … Font Awesome gives you thousands – with a clear consistent design !

So how exactly does it work?

You basically enter a small string of text in HTML view that inserts an icon into Moodle. There are thousands of icons to choose from. Easiest way to try? Create a new Label, and in the editor HTML view, try adding this code and save to see what you get:

<i class="fa fa-apple" size="3x"></i> <i class="fa fa-facebook" size="3x"></i> <i class="fa fa-google" size="3x"></i> [wpfa icon="apple" size="3x" style="color:black"]
[wpfa icon="facebook" size="3x"] [wpfa icon="google" size="3x"]

Those of you with some basic HTML knowledge will recognise the <i> tag, which means italic. In reality most web designers use <em> (for emphasis) to display italic text, so it’s OK to use this.  Or use a span if you want to be more correct:

<span class="fa fa-apple"size="3x"></span>

All good ?

OK, so your task before my next post is to see if you can change the code above to display icons for Twitter, YouTube, and Skype instead …

See the full collection of articles on using Font Awesome with Moodle within this dedicated (open and free) Moodle course on our ElearningWorld Academy.

• About
• Latest Posts

Stuart Mealor

Managing Director at HRDNZ

Stuart is interested in all things e-learning, with specific interests in Moodle, e-learning strategy, and business development.His experience in education over 30 years, MBA in International Business, and knowledge of e-learning systems implementation, together with graphic design background, give him a unique skill set for e-learning projects.

Latest posts by Stuart Mealor (see all)

• H5P periodic table – 8th September 2023
• Moodle 4.0 – 15th May 2022
• Moodle 4.0 other highlights – 14th May 2022