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>

[wpfa icon=”facebook” color=”black”]

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

[wpfa icon=”twitter” color=”black”]

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

[wpfa icon=”youtube” color=”black”]

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>

[wpfa icon=”facebook” size=”5x” color=”black”]

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

[wpfa icon=”twitter” size=”5x” color=”black”]

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

[wpfa icon=”youtube” size=”5x” color=”black”]

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>

[wpfa icon=”facebook” size=”5x” color=”#3B5998″]

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

[wpfa icon=”twitter” size=”5x” color=”#00aced”]

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

[wpfa icon=”youtube” size=”5x” color=”#ff0000″]

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>

[wpfa icon=”apple” size=”5x” color=”#006600″] [wpfa icon=”apple” size=”5x” color=”#ffff00″] [wpfa icon=”apple” size=”5x” color=”#ff0000″]

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>

[wpfa icon=”envelope” size=”5x” color=”#ff9900″] [wpfa icon=”thumb-tack” size=”5x” color=”#ff9900″] [wpfa icon=”commenting” size=”5x” color=”#ff9900″] [wpfa icon=”question-circle” size=”5x” color=”#ff9900″] [wpfa icon=”phone” size=”5x” color=”#ff9900″] [wpfa icon=”graduation-cap” size=”5x” color=”#ff9900″] [wpfa icon=”rss” size=”5x” color=”#ff9900″]

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.

• About
• Latest Posts

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)

• H5P periodic table – 8th September 2023
• Moodle 4.0 – 15th May 2022
• Moodle 4.0 other highlights – 14th May 2022