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).
Yesterday I was doing some work on the Donation Forms Website where they are now giving away free professional Websites to Charities and Not for Profit organizations. A neat effect was achieved with a heart that spins in on Page load. This doesn’t use the icon-spin animation but rather some very clever CSS called Animate.css (view the red heart spin in on the free Website Page). To achieve the effect the CSS provided with Animate.css is combined with the Font Icon css.
Here are the steps in using Animate.css with font icons on a WordPress Website:
- Make sure that the Font Awesome CSS is loaded by adding the following to the top of style.css
@import "<link href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet">";
- Download animate.css from GitHub and save the downloaded CSS file to your Webhost.
- Load animate.css by saving the following to the top of style.css (change the URL as necesssary)
<pre>@import "<link href="http://www.example.com/animate.css" rel="stylesheet">";
- To your Page or Posts, Add the Font Icon HTML then encapsulate the Font Icon HTML in a span that contains the relevant Animate.css classes e.g.
<span class="animated rotateIn"><i class="icon-heart" ></i></span>
That’s all there is to it. Your icon will now have animation