You're viewing docs for v5.15.4, an older version of Font Awesome.
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.
Use the 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>
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:
Switch to the SVG with JavaScript version, it's working a lot better for this.
Use display: block; where you can. This seems to help a lot with this issue.