Colouring an icon

Do you want colour icons instead of black?

This is easy too. You can just add a colour statement:

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 course 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.

Adding colour is as easy as adding an extra statement - see the bold text below that adds the colour statement:

<span class="fa fa-graduation-cap fa-5x" style="color:MidnightBlue"></span>


<span class="fa fa-graduation-cap fa-5x" style="color:Tomato"></span>

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

<span class="fa fa-graduation-cap fa-5x" style="color:#008080"></span>

And Maroon has a Hex value of #800000

<span class="fa fa-graduation-cap fa-5x" style="color:#800000"></span>

So, now you can colour your icons any way you want smile

All good ?