We’ll cover the basics of animations like beat, fade, beat-fade, flip, and spin to your icons, so that you can create more visual interest on your site.
Use the fa-flip animation to rotate an icon in 3D space(opens new window). By default, flip rotates an icon about the Y axis 180 degrees. Flipping is helpful for transitions, processing states, or for using physical objects that one flips in the real world.
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 and everything in the spinner icons category. If you would like an icon to spin in reverse (e.g., counter-clockwise), add an additional class of fa-spin-reverse.
Makes an icon spin 360° clockwise in 8 incremental steps
fa-spin-reverse
When used in conjunction with fa-spin or fa-spin-pulse, makes an icon spin counter-clockwise.
We've deprecated fa-pulse
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 migrate to use it in future versions.
Accessibility
Advertisement
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
All 26,233 icons in Font Awesome
5 Classic styles of every icon
3 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
Using animations on the web in the most accessible way requires a little extra consideration:
In general, it's best to use animations on the web in a complementary way rather than the only way to note a state change in UI. Remember to update the text of actions and change elements' other visual aspects too!
And when it comes to an animation's timing and duration, avoid changing the state of something at a rate of three times per second or greater - which can trigger photosensitive epilepsy.
All included animations now support and leverage the prefers-reduced-motionCSS media feature(opens new window) to detect if a user has requested that the system minimize the amount of non-essential motion it uses.
Case
How It Affects Included Animations
No preference set (default)
Animations will render as expected
Preference set to reduce
Animations will be disabled
When a prefers-reduced-motion is set to reduce, it indicates that the user prefers less motion, which may trigger discomfort for those with vestibular motion disorders on the page.
We've added CSS custom properties(opens new window) to make customizing easier and more efficient, and you can use these custom properties across all of our animations. Define your own values for the following properties to override and customize Font Awesome's defaults.
We've worked hard to keep icons perfectly centered when they spin or pulse. However, we've seen issues with several browsers with the Web Fonts + CSS method of Font Awesome. 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 — Use display: block; where you can. This seems to help a lot with this issue.
Switch Frameworks — Switch to the SVG with JavaScript method; it's working a lot better for this.