Font Awesome and Moodle, Part 12 – Stacked coloured icons
In part twelve of this series we look at how to colour stacked Font Awesome 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)
(Link to Part 5 of this series – colour & size combinations)
(Link to Part 6 of this series – rotating)
(Link to Part 7 of this series – fixed width icons)
(Link to Part 8 of this series – list icons)
(Link to Part 9 of this series – pulling icons)
(Link to part 10 of this series – animating icons)
(Link to part 11 of this series – stacking)
In the last post we looked at how to stacking Font Awesome.
Remember this example?
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>

Well, no tips this month, just a challenge.
Can you make the following stacked Font Awesome icons by adding the colours?

Also, what other ideas can you come up with? What about a white Facebook “F” on the correct colour square? Or a no running symbol? Use your imagination!
More Font Awesome ideas next month.
- Moodle jobs: Full-time eLearning Consultant – Full-time – Telecommute – 20th January 2025
- Moodle jobs: Moodle UX/UI designer – Contract – Remote – 7th December 2024
- PHP 8.0 Model Classes with constructor promotion – 24th November 2024