Font Awesome and Moodle, Part 5 – Combinations

In part four of this series we looked at how to control the size of Font Awesome to make it useful for icons.

(Link to Part 1 of this series – basics)
(Link to Part 2 of this series – icons)
(Link to Part 3 of this series – colour)
(Link to Part 4 of this series – size)

In this post, we will be summarising, consolidating, and looking at how to combine what we know so far.

Choose your icon

Remember back to part 2, and how you can choose icons?

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

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

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

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

Set your size

Remember back to part 4, when we set the size?

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

<i class="fa fa-facebook fa-5x"></i>

<i class="fa fa-twitter fa-5x"></i>

<i class="fa fa-youtube fa-5x"></i>

Choose your colour

Remember back in part 3, when we set the colours?

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

<i class="fa fa-facebook fa-5x" style="color:MidnightBlue"></i>

<i class="fa fa-twitter fa-5x" style="color:LightBlue"></i>

<i class="fa fa-youtube fa-5x" style="color:Red"></i>

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

You can have your apples any way you like them…

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

  

Or standardise your Moodle course icons

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

      

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 as icons for each Section (Topic or Week) at a size and colour that matches your course theme 🙂

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.

Stuart Mealor

Managing Director at HRDNZ
Stuart is interested in all things e-learning, with specific interests in Moodle, e-learning strategy, and business development.His experience in education over 30 years, MBA in International Business, and knowledge of e-learning systems implementation, together with graphic design background, give him a unique skill set for e-learning projects.

Latest posts by Stuart Mealor (see all)

Stuart Mealor

Stuart is interested in all things e-learning, with specific interests in Moodle, e-learning strategy, and business development. His experience in education over 30 years, MBA in International Business, and knowledge of e-learning systems implementation, together with graphic design background, give him a unique skill set for e-learning projects.

Add a reply or comment...

%d bloggers like this: