How to animate Font Awesome icons using CSS

My regular readers will know that I’m a bit of a Font Awesome icon font fan. I just love how simple they are to use and the speed with which they load (much faster than using images for icons due to fewer HTTP requests, CSS having a smaller filesize than images and so on). Best of all is that Font Awesome is CSS which means that if you know a bit of CSS scripting then all sorts of visual delights may be achieved with a line or two of script.

As we know, there have been significant advances with what we can do with CSS animation. In the past, for many animations we may have used a GIF file or, dare I say it, a Flash animation. With Font Awesome however, as far as I know, the only pre-defined animation is the icon-spin class which spins an icon continuously (which is actually really awesome).

Mailchimp Training Near You

What our clients say

"Gary was awesome! He has a fantastic way of making everything rather simple and straightforward. I definitely left with a lot more knowledge, confidence and ideas than when I walked in. Thanks Gary!" Fiona