For the online learning world

FontLearning designMoodle

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>

Apple logo

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>

Apple logo

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>

Apple logo

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>

Font Awesome rotated

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

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.

4 thoughts on “Font Awesome and Moodle, Part 6 – Rotate

Add a reply or comment...