- Fun with Font Awesome – Adding Icons to Your WordPress Site
- More Font Awesome and WordPress: Stacking
- Font Awesome and WordPress, Rotating and Animating Icons
- Font Awesome and WordPress as Part of Your Daily Flow
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.
- Tables That You Can Sort and Search - May 24, 2017
- Responsive Newspaper-Style Columns are Easy with CSS - May 23, 2017
- Use Tooltips to Add Context - May 22, 2017