Font Awesome in Moodle - BROKEN LINKS

Creation date: 25/07/2018 14:12    Updated: 20/05/2021 16:24    design font awesome moodle

What is Font Awesome? 


Font Awesome gives you scalable vector icons that can instantly be customized -- size, colour, drop shadow, and anything that can be done with the power of CSS. More info on FontAwesome can be found here.


How does it work?


You can enter a small string of text which inserts an icon into Moodle. There are thousands of icons to choose from. See this Font Awesome Cheatsheet for the full list of icons you can use.

To use Font Awesome in Moodle, you don't need to insert a piece of code but just copy and paste, into square brackets, the text from the Cheatsheet directly into the editing page (not the HTML page) in Moodle.
 
For example: if you want an ambulance icon, you put into the editing box in Moodle:
 
[fa-ambulance] 
 
If you want to make the icon bigger or smaller, give it a size:
 
[fa-ambulance fa-5x] 
 
Change the number to change the size.
 
For something a bit fancier: if you want to set the icon a bit more responsively in relation to text - to float the icon around text, for example, you'll need to go into the code and put a float and margin style into the text. For example this:
 
<p style="float: left; margin: 10px;">[fa-ambulance fa-5x]</p>
<p>Ne silvae quidem horridiorque naturae facies medicinis carent, sacra illa parente rerum omnium nusquam non remedia disponente homini, ut medicina fieret etiam solitudo ipsa, et ad singula illius discordia atque concordiae miraculis occursantibus. Quercus et olea tam pertinaci odio dissident, ut altera in alterius scrobe depacta emoriantur, quercus vero et iuxta nucem iuglandem. Pernicialia et brassicae cum vite odia; ipsum olus, quo vitis fugatur, adversum cyclamino et origano arescit.</p>
 
will look like this:
 

Do you want Colour Icons instead of black? 
 
This is easy. You can just select the text and change the font colour through the editor and it will change the icon colour. 
 
Just a final note: at this stage not all of the icons on the Cheatsheet work - if the item has a version number next to it (any version number, including 4.7) it won't work. The only ones that seem to work are those that do not have a version number (i.e. blank)