So You Want to Make a FontAwesome Icon Spin…
Look on any website, even this, and you will be sure to see icons used for various functions placed all over — whether it’s a row of icons containing links to to a company’s various social media pages, or a little bell icon used to indicate a notification, they’re practically unavoidable. Adding these icons to your own sites can make the sites look better, but can also improve user experience by drawing their eyes to important information. I’m sure there are many available sources for these icons — and you could even make your own if you were so inclined, but in my (limited) experience I’ve found that the most complete, and easiest to use source is Font Awesome.
Without paying for anything there are over 1500 icons available for immediate use, with more available for purchase. The icons are easy enough to get on the page, there are packages that have been optimized for different frameworks, and the documentation is very clear. I chose to work without frameworks for my latest project, so although there may be similarities if you are using Font Awesome with React or another framework, there will also be difference to look out for. Generally though, once the project has been configured to begin using the icons from Font Awesome, all that’s needed to get the icon on the page is some code like this:
<span class="fas fa-camera"></span>In HTML, code that looks like this:
will result in a page that looks like this:
From here, a common usecase would be to place an anchor tag around the span so that clicking the icon would send the user to another location, but for my purposes, I am looking to create a simple animation with the icon.
Font awesome does have a built in class that can be added on to make an element spin in place. By adding the class name ‘fa-spin’ or ‘fa-pulse’ to the icon it will begin to spin. Although in practice I would seek out a different icon, maybe something more circular, this effect would look good as a loading icon. For the sake of the example, this is how the icon would look by adding the ‘fa-spin’ class to it:
Like I said, this could have utility as a loading icon, but I am looking for something more customized — specifically, I want to have my icon rotate as the user scrolls down the page. For this, there is no built-in method from Font Awesome, but we can turn to JavaScript event handlers to achieve this. The code below demonstrates one way in which this could be done:
I decided to change the icon to a gear cog, since that should look a little better while rotating, and then I’ve written some simple JavaScript within a script tag on lines 11–16. The pageYOffset seen on line 14 refers to how far down the document is currently scrolled on the y-axis in pixels. I chose to divide that number by two in order to slow down the rotation, but that divider can be omitted, or changed as needed. At this point, although it may be hard to tell from the gif below, I have the rotate on scroll effect that I am looking for. As I scroll down the icon rotates to the right, and rotates to the left as I scroll up.
This pattern of selecting the icon and applying a change to it based on an event could also be used for other transformations as well. I could change the event type from “scroll” to “click” and maybe instead of rotate could change to a random color — the possibilities are endless, although I think I will leave it at that for now though!
As always, let me know if I’ve missed something!
