Html css

How To Rotate And Flip Your Font Awesome Icons

Posted by Weston Ganger

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

Recommended Posts

Contact

604-309-8713
info@solidfoundationwebdev.com

Westonganger profile

Send Me A Message

I would love to get in touch and talk about your next project. Feel free to send a message and I will get back to you shortly.


Get Connected