Combining size and colour

Let's consolidate, and look at how to combine what we know so far.

Choose your icon

By now you know how to choose different Font Awesome icons:

So let's use a couple of slightly cooler icons (if there is such a thing?!)

<span class="fa fa-facebook"></span> <span class="fa fa-twitter"></span> <span class="fa fa-youtube"></span>

Set the size

We know the standard size is often too small for the way we might want to use Font Awesome in Moodle, so from now on, let's add the size so we've got something usable:

<span class="fa fa-facebook fa-5x"></span> <span class="fa fa-twitter fa-5x"></span> <span class="fa fa-youtube fa-5x"></span>

Choose your colours

And now, let's add the colours as well, all in the same neat statement:

<span class="fa fa-facebook fa-5x" style="color:#3B5998"></span> <span class="fa fa-twitter fa-5x" style="color:#00aced"></span> <span class="fa fa-youtube fa-5x" style="color:#ff0000"></span>

So, now you can choose, size, and colour your icons !

You can have your apples any way you like them...

<span class="fa fa-apple fa-5x" style="color:#006600"></span> <span class="fa fa-apple fa-5x" style="color:#ffff00"></span> <span class="fa fa-apple fa-5x" style="color:#ff0000"></span>

Or standardise your Moodle course icons

<span class="fa fa-envelope fa-5x" style="color:#ff9900"></span> <span class="fa fa-thumb-tack fa-5x" style="color:#ff9900"></span> <span class="fa fa-commenting fa-5x" style="color:#ff9900"></span> <span class="fa fa-question-circle fa-5x" style="color:#ff9900"></span>
<span class="fa fa-phone fa-5x" style="color:#ff9900"></span> <span class="fa fa-graduation-cap fa-5x" style="color:#ff9900"></span> <span class="fa fa-rss fa-5x" style="color:#ff9900"></span>

All good?

Why not try adding some Font Awesome to your course as icons for each Section (Topic or Week) at a size and colour that matches your course theme?

Good luck!