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 


Need help on your next project or application?

I specialize in Ruby-on-Rails, AngularJS, Javascript, Bootstrap, and Hybrid Mobile Apps with Cordova & Ionic.

Contact Me

Recommended Posts