How to flip and rotate fa fa icons

<!-- 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

font-awesome is a great tool, but did you know you can customise the way it looks? You can rotate and flip/mirror the icons using these simple built in classes.


Was this answer helpful? 27 Users Found This Useful (2 Votes)