CODEWITHSUNDEEP
reactjsfont-awesome
user9347049
user9347049

Reputation: 2055

Not able to import font-awesome in Reactjs project

I am trying to use font-awesome in my Reactjs project but I have problem importing it.

Have installed it

npm install --save font-awesome

Imported it in my index.js file

import '../node_modules/font-awesome/css/font-awesome.min.css';

webpack.config.js

Added loader to my webpack

{
  test: /font-awesome\.config\.js/,
  use: [
        { loader: 'style-loader' },
        { loader: 'font-awesome-loader' }
       ]
}

And then tried to use it in my code

<a href="#about" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-down animated"></i>

But I am getting this error:

You may need an appropriate loader to handle this file type.

What loader should I use instead of one I did?

Upvotes: 0

Views: 595

Answers (1)

gazdagergo
gazdagergo

Reputation: 6691

Use the React implementation of FontAwsome:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faAngleDoubleDown } from '@fortawesome/free-solid-svg-icons'

...

render() {
  return (
    <FontAwesomeIcon icon={faAngleDoubleDown} pulse />
  )
}

You can use the desired animation with adding pulse or spin boolean prop.

Upvotes: 2

Related Questions