Rotating and flipping icons

Why might you want to rotate icons?

  • Sometimes an icon may simply look 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" style="color:#808080"></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>