Font Awesome comes bundled with basic animations in our support styling. They're meant to cover common UI cases such as communicating loading or processing.
Use the fa-spin class to get any icon to rotate, and use fa-spin-pulse to have it rotate with eight steps. This works especially well with fa-spinner & everything in the spinner icons category. If you would like an icon spin in reverse (e.g. counter-clockwise), add an additional class of fa-spin-reverse.
<div class="fa-3x">
<i class="fa-solid fa-spinner fa-spin"></i>
<i class="fa-solid fa-circle-notch fa-spin"></i>
<i class="fa-solid fa-sync fa-spin"></i>
<i class="fa-solid fa-sync fa-spin fa-spin-reverse"></i>
<i class="fa-solid fa-cog fa-spin"></i>
<i class="fa-solid fa-spinner fa-spin-pulse"></i>
<i class="fa-solid fa-stroopwafel fa-spin"></i>
<i class="fa-solid fa-spinner fa-spin-pulse fa-spin-reverse"></i>
</div>
| Class | Details |
|---|---|
fa-spin | Makes an icon spin 360° clock-wise |
fa-spin-pulse | Makes an icon spin 360° clock-wise in 8 incremental steps |
fa-spin-reverse | When used in conjunction with fa-spin or fa-spin-pulse, makes an icon spin counter-clockwise |
The fa-pulse animation class that we used on previous versions of Font Awesome still works in Version 6. But we've decided to rename it to fa-spin-pulse. We think that name is more accurate to its purpose and will be migrating to use this in future versions.
We've added CSS custom properties to make customizing easier and more efficient. Define your own values for the following properties to override and customize Font Awesome's defaults.
| CSS Custom Property | Details | Accepted Values |
|---|---|---|
--fa-spin-direction | Set direction for animation | Any valid CSS animation-direction value |
--fa-spin-duration | Set duration for animation | Any valid CSS animation-duration value |
--fa-spin-iteration-count | Set number of iterations for animation | Any valid CSS animation-iteration-count value |
--fa-spin-timing | Set how the animation progresses through frames | Any valid CSS animation-timing-function value |
<div class="fa-3x">
<i class="fa-solid fa-cog fa-spin"></i>
<i class="fa-solid fa-cog fa-spin" style="--fa-spin-direction: reverse;"></i>
<i class="fa-solid fa-cog fa-spin" style="--fa-spin-duration: 15s;"></i>
<i class="fa-solid fa-compact-disc fa-spin" style="--fa-spin-duration: 30s; --fa-spin-iteration-count: 1;"></i>
<i class="fa-solid fa-tire fa-spin" style="--fa-spin-duration: 3s; --fa-spin-iteration-count: 5; --fa-spin-timing: ease-in-out;"></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 with the Web Fonts + CSS method 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:
display: block; where you can. This seems to help a lot with this issue.