Font Awesome has a special spin animation for elements that have the class fa-spin. Taking a closer look at the CSS code, you can see that the spinning effect is achieved through keyframes under the same name, fa-spin.
Instead of creating a new animation from scratch, I wanted to utilize this pre-existing one within a hover selector.
i.fa-gear:hover {
-webkit-animation: fa-spin 2s infinite linear;
}
However, despite implementing it, the expected result doesn't seem to be happening.
You can check out an example in this JSBin link.
Initially, I suspected that the issue could be related to JSBin importing the CSS section before the Font Awesome rules were established, but further investigation proved otherwise.