Font Awesome and Moodle, Part 3 – Colours
In part two of this series we looked at how to choose a Font Awesome icon.
(Link to Part 1 of this series)
(Link to Part 2 of this series)
In this post, we will be looking at how to use colours with Font Awesome icons.
More than one way
Please bear in mind if you already know about HTML colours and CSS and so on, you will probably be screaming right now “Don’t use inline formatting!”.
But we are approaching this series in a basic way, to help ordinary Moodle teachers use Font Awesome – perhaps for just a few in-course icons.
Colour names
You can find many, many websites to help you choose colours, and I suggest you stick to web safe colours.
You can probably guess the main colour names to use such as Black, Blue, Green, Gold, Olive, Plum, and so on.
But this site (as well as many others you can find) lists the names you probably wouldn’t guess such as SlateBlue, PaleGreen, MistyRose, LightSalmon, and many others.
https://www.w3schools.com/colors/colors_names.asp
If you think back to part two of this series, you will remember we can add a Font Awesome icon like this:
<i class="fa fa-camera-retro fa-3x"></i> [wpfa icon="camera-retro" size="3x" color="black"]
Adding colour is as easy as adding an extra statement – see the bold text below that adds the colour statement:
<i class="fa fa-camera-retro fa-3x" style="color:MidnightBlue"></i> [wpfa icon="camera-retro" size="3x" color="midnightblue"]
or
<i class="fa fa-camera-retro fa-3x" style="color:Tomato"></i> [wpfa icon="camera-retro" size="3x" color="tomato"]
Do note the Americanised spelling of color, and not the English spelling of colour.
Hex codes
Hexadecimal codes can also be used. They are not as user friendly, but ‘real’ web designers and HTML writers will tend to use these.
So for example, Teal has a Hex value of #008080
<i class="fa fa-camera-retro fa-3x" style="color:#008080"></i> [wpfa icon="camera-retro" size="3x" color="#008080"]
And Maroon has a Hex value of #800000
<i class="fa fa-camera-retro fa-3x" style="color:#800000"></i> [wpfa icon="camera-retro" size="3x" color="#800000"]
So, now you can colour your icons any way you want 🙂
All good ?
OK, so your task before my next Font Awesome post is to see if you can add some Font Awesome icons to your course, and match your Moodle site colour scheme (or the colour scheme of your course) … good luck !
See the full collection of articles on using Font Awesome with Moodle within this dedicated (open and free) Moodle course on our ElearningWorld Academy.
- H5P periodic table – 8th September 2023
- Moodle 4.0 – 15th May 2022
- Moodle 4.0 other highlights – 14th May 2022
Pingback: Font Awesome and Moodle, Part 8 - list icons - ElearningWorld.org
Pingback: Font Awesome and Moodle, Part 7 - fixed width icons - ElearningWorld.org
Pingback: Font Awesome and Moodle, Part 3 - Size - ElearningWorld.org