'FontAwesome spinner won't spin in React

I created a React application with npx create-react-app.

Then following these instructions

https://fontawesome.com/how-to-use/on-the-web/using-with/react

I installed the Font Awesome dependences:

npm i @fortawesome/fontawesome-svg-core
npm i @fortawesome/free-solid-svg-icons
npm i @fortawesome/react-fontawesome

Then I changed the App.js to this:

import logo from './logo.svg';
import './App.css';
import { FaSpinner } from 'react-icons/fa';

function App() {
  return (
    <div className="App">
          <FaSpinner icon="spinner" spin /> This is a test.
    </div>
  );
}

export default App;

But it only displays a spinner icon that is not spinning:

How do I get the spinner to spin?

NOTE:

Outside of React, Font Awesome works fine without doing any extra work to animate the icons, e.g. this simple HTML code shows an animated icon:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet"
          type="text/css"
          href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <title>testspin</title>
</head>
<body>
    <i class="fa fa-spinner fa-spin"
       aria-hidden="true"></i> 
This is a test
</body>
</html>

What do I need to do in order to get the React version to work this easily?

reactjs font-awesome

Solution 1:^[1]

By default, the spinner will not spin. But a simple way to trigger it to spin just like the logo of React after creating a new react app.
Add a className of spin to the icon and add a little css to trigger it spinning such like that below:

App.js

import react from 'react';
import './App.css';
import { FaSpinner } from 'react-icons/fa';

function App() {
  return (
    <div className="App">
          <FaSpinner icon="spinner" className="spinner" /> This is a test.
    </div>
  );
}

export default App;

App.css

.spinner {
    animation: spin infinite 5s linear;

    /*You can increase or decrease the timer (5s) to 
     increase or decrease the speed of the spinner*/
  }

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Solution 2:^[2]

Actually you just need to add the class fa-spin, no need to add any custom css, this is already included with React-Fontawesome for the class fa-spin. Here is an example from a project of mine:

import React, { useState } from 'react'
import { faCog, faFilePdf } from '@fortawesome/free-solid-svg-icons'
import { Button } from 'react-bootstrap'


const MyComponent = () => {
  const [pdfCreatingState,setPdfCreatingState] = useState(false);

  const handleClick = ev => {
      setPdfCreatingState(true);
      setTimeout(() => generatePDFDocument(docData,docName));
  }

  const generatePDFDocument = async (docData,docName) => {
      ...
  }
 
  return(
      <Button className="mr-4" onClick={handleClick}>
          <FontAwesomeIcon icon={pdfCreatingState ? faCog : faFilePdf} title={"Generate PDF report"} className={pdfCreatingState ? "fa-spin" : ""} />
      </Button>
  );

}

Solution 3:^[3]

I had the same situation with Nextjs and noticed that the proper <style> tag for animation was not being generated. So I solved the problem by directly importing it. In my case, Adding import "@fortawesome/fontawesome-svg-core/styles.css" fixes the issue, and FontAwesome works as intended.

Solution 4:^[4]

In my project I'm using react-icons/fa and the answer provided by @Qudusayo worked very well for smooth spinners. If anyone is trying to create a 'pulsed' or 'step' spinner, here's how you can do that:

CSS:

.icon_pulse {
    animation: circle 1.2s steps(8) infinite;
}

@keyframes circle {
    from {
        transform: rotate(90deg);
    }

    to {
        transform: rotate(450deg);
    }
}

JSX:

<FaSpinner className="icon_pulse" />

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Edward Tanguay
Solution 2	JohnRDOrazio
Solution 3	Keita Ono
Solution 4	Elliot B.

'FontAwesome spinner won't spin in React

NOTE:

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]