reactjsfont-awesome

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:

enter image description here

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?

Solution

  • 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);
  }
}