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>
![](https://i0.wp.com/www.elearningworld.org/wp-content/uploads/2019/07/FA_stacked_twitter.png?resize=103%2C103&ssl=1)
Well, no tips this month, just a challenge.
Can you make the following stacked Font Awesome icons by adding the colours?
![](https://i0.wp.com/www.elearningworld.org/wp-content/uploads/2019/07/fa_stacked_colour.png?resize=365%2C108&ssl=1)
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.
- Can Chat GPT really replace a coder? – 19th July 2024
- MEC (Moodle Educator Certificate) course starting August 1st – 8th July 2024
- Moodle jobs: Instructional Designer – Contract – Telecommute – 26th June 2024