Wednesday, 7 December 2016

Using FontAwesome in Moodle

FontAwesome is a nifty icon set that you can use anywhere that you can edit HTML.

For example, you can use it in Moodle to display a symbol.

Step 1. Go to edit mode and find the text region you want to edit.

Step 2. Click on the first button on the toolbar (to show more buttons)

Step 3. Click on the HTML edit mode button <>

Step 4. Go to FontAwesome icons and click on the one you want to use

If your icon is purely for decorative purposes, use this code:

<i class="fa fa-tree" aria-hidden="true"></i>
If it has a semantic meaning, use this code:

<i class="fa fa-tree"></i>

To improve web accessibility, FontAwesome recommend using aria-hidden="true" to hide icons used purely for decoration.

Step 5. Paste the HTML into the Moodle text box

Step 6. Turn off HTML editing (click on the HTML edit mode button <> again)
Now you have a tree in your text box!

Need to make it bigger? 

Go back to HTML edit mode and paste in one of these examples...
To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2xfa-3xfa-4xor fa-5x classes.
<i class="fa fa-tree fa-lg"></i> 
<i class="fa fa-tree fa-2x"></i> 
<i class="fa fa-tree fa-3x"></i> 
<i class="fa fa-tree fa-4x"></i> 
<i class="fa fa-tree fa-5x"></i> 
Now you have an even bigger tree in your text box.

With thanks to Harry Kalantzis for pointing out that you can use FontAwesome in Moodle.