Need a loading or status communicating-icon to spin? You've come to the right place. We've included some basic animations in our support styling for you to use.
fa-spin class to get any icon to rotate, and use
fa-pulse to have it rotate with eight steps. This works especially well with
fa-spinner & everything in the spinner icons category.
<div class="fa-3x"> <i class="fas fa-spinner fa-spin"></i> <i class="fas fa-circle-notch fa-spin"></i> <i class="fas fa-sync fa-spin"></i> <i class="fas fa-cog fa-spin"></i> <i class="fas fa-spinner fa-pulse"></i> <i class="fas fa-stroopwafel fa-spin"></i> </div>
Icon Animation + Wobbles
We've worked hard to keep icons perfectly centered when they are spinning or pulsing. However, we've seen issues with several browsers and the web fonts + CSS version of Font Awesome. Through a lot of investigation this appears to be an issue with web fonts in general and not something we can directly fix. We do have a couple of ways you might be able to work around this:
Set the display of the animating icon
display: block; where you can. This seems to help a lot with this issue.