Font Awesome and Moodle, Part 11 – Stacked icons
In part eleven of this series we look at how to stack 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)
In this post we will be stacking icons.
Why would we want to do this?
- It can take your icons to a ‘new level’
- It can help with consistency
- It simply looks cool
To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x for the regular sized icon, and fa-stack-2x for the larger icon.
Try this example (This should be fairly familiar code for you now?):
<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>
Personally I often make the container a bit bigger (e.g. fa-3x) but it obviously depends on exactly what effect or style you are trying to achieve.
Stacking cans you can combine all the Font Awesome icons in new and interesting ways.
Having seen the example above of the Twitter button, can you also create the following:
- Moodle graduation cap in a circle
- A command line prompt in a square
- A no photography sign
More stacked ideas next month.
- H5P periodic table – 8th September 2023
- Moodle 4.0 – 15th May 2022
- Moodle 4.0 other highlights – 14th May 2022
