Font Awesome and WordPress, Rotating and Animating Icons

In previous posts we’ve seen how easy it is to add Font Awesome icons to your WordPress posts and pages.  But what if the icon you want to use points in the wrong direction?  Or perhap it would look better animated?  It is just as easy to change the orientation of an icon or animate it as it is to add the icon!

Font Awesome has six classes that allow you to rotate or flip an icon however you wish:

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

Just add the class to the icon you want to rotate:

<i class="fa fa-tree fa-rotate-90"></i>Watch for falling trees!

Watch for falling trees!

Spinning or animating an icon is similar:

• fa-spin – icon will rotate constantly
• fa-pulse – icon rotates with 8 steps to make it look like it is pulsing

The fa-spin class will work with any icon, but there are four it works with expecially well using the fa-spin class:

• fa-spinner
• fa-circle-o-notch
• fa-refresh
• fa-cog

And again using the fa-pulse class:

• fa-spinner
• fa-circle-o-notch
• fa-refresh
• fa-cog

Note that the animations won’t work in IE8-IE9.

In the final post of our series we’ll look at practical ways to use icons in your every day posts.