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>

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.

Follow me

ElearningWorld Admin

Administrator at HRDNZ
Site administrator
Follow me

Latest posts by ElearningWorld Admin (see all)


ElearningWorld Admin

Site administrator

Add a reply or comment...

%d bloggers like this: