Html css

How To Rotate And Flip Your Font Awesome Icons

Posted by Weston Ganger on October 18, 2016

If you are using font-awesome there is a trick you may not know about. You can rotate and flip/mirror the icons using these simple built in classes.


<!-- Font Awesome 4+ -->
<i class="fa fa-long-arrow-up"></i> normal
<i class="fa fa-long-arrow-up fa-rotate-90"></i> fa-rotate-90
<i class="fa fa-long-arrow-up fa-rotate-180"></i> fa-rotate-180
<i class="fa fa-long-arrow-up fa-rotate-270"></i> fa-rotate-270
<i class="fa fa-long-arrow-up fa-flip-horizontal"></i> fa-flip-horizontal
<i class="fa fa-long-arrow-up fa-flip-vertical"></i> fa-flip-vertical

<!-- Font Awesome 3 -->
<i class="icon-long-arrow-up"></i> normal
<i class="icon-long-arrow-up icon-rotate-90"></i> icon-rotate-90
<i class="icon-long-arrow-up icon-rotate-180"></i> icon-rotate-180
<i class="icon-long-arrow-up icon-rotate-270"></i> icon-rotate-270
<i class="icon-long-arrow-up icon-flip-horizontal"></i> icon-flip-horizontal
<i class="icon-long-arrow-up icon-flip-vertical"></i> icon-flip-vertical

  normal
  fa-rotate-90
  fa-rotate-180
  fa-rotate-270
  fa-flip-horizontal
  fa-flip-vertical


Related External Links:


Posted in HTML / CSS and Tagged with font-awesome 


Want me to help develop your next project or application?

Contact Us

Specializing in Ruby-on-Rails, Javascript, Multi-Platform Electron Desktop Apps and Hybrid Cordova Mobile Apps.

Recommended Posts