Font Awesome and Moodle, Part 6 – Rotate

In part five of this series we looked at how to combine controlling the size and colour of Font Awesome to make it really useful for 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)

In this post, we will be rotating our icons.

Why would we rotate?

• Sometimes an icon may simply work better if it is rotated.
• Sometimes it might help with visual consistency.
• Sometimes it might just be for a quirky effect.
• And sometimes it could be for increased clarity (which we will see in a later post in this series).

Consider our standard Apple logo

<span class=”fa fa-apple fa-5x”></span>

Firstly, we can flip a Font Awesome icon horizontally, or vertically:

<span class="fa fa-apple fa-5x fa-flip-horizontal" style="color:#808080"></span>
<span class="fa fa-apple fa-5x fa-flip-vertical" style="color:#808080"></span>

We can also rotate, using standard degree values:

<span class="fa fa-apple fa-5x fa-rotate-90" style="color:#808080"> <span class="fa fa-apple fa-5x fa-rotate-180" style="color:#808080"></span> <span class="fa fa-apple fa-5x fa-rotate-270" style="color:#808080"></span>

So while you might not do a lot of flipping and rotating, it can be useful now and again for a specific effect, or just to catch someone’s eye:

<span class="fa fa-info fa-5x fa-flip-vertical" style="color:blue"></span> <span class="fa fa-question-circle fa-5x fa-flip-vertical" style="color:green"></span> <span class="fa fa-warning fa-5x fa-rotate-90" style="color:red"></span>

See the full collection of articles on using Font Awesome with Moodle within this dedicated (open and free) Moodle course on our ElearningWorld Academy.

• About
• Latest Posts

Stuart Mealor

Managing Director at HRDNZ

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.

Latest posts by Stuart Mealor (see all)

• H5P periodic table – 8th September 2023
• Moodle 4.0 – 15th May 2022
• Moodle 4.0 other highlights – 14th May 2022