For the online learning world

FontLearning designMoodle

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>

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.

Stuart Mealor
Latest posts by Stuart Mealor (see all)

Stuart Mealor

Stuart is interested in all things e-learning, with specific interests in Moodle, e-learning strategy, and business development. His experience in education over 30 years, MBA in International Business, and knowledge of e-learning systems implementation, together with graphic design background, give him a unique skill set for e-learning projects.

Add a reply or comment...