Font Awesome and Moodle, Part 12 – Stacked coloured icons

8th October 201931st July 2019 ElearningWorld Admin

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.