How to include a Font Awesome icon in React's render()

Question

Whenever I try to use a Font Awesome icon in React\'s render(), it isn\'t displayed on the resulting web page although it works in normal HTML.

Answer 1

In my case I was following the documentation for react-fontawesome package, but they aren't clear about how to call the icon when setting the icons into the library

this is was what I was doing:

App.js file

import {faCoffee} from "@fortawesome/pro-light-svg-icons";
library.add(faSearch, faFileSearch, faCoffee);

Component file

<FontAwesomeIcon icon={"coffee"} />

But I was getting this error

Then I added the alias when passing the icon prop like:

<FontAwesomeIcon icon={["fal", "coffee"]} />

And it is working, you can find the prefix value in the icon.js file, in my case was: faCoffee.js

Answer 2

You need to install the package first.

npm install --save react-fontawesome

OR

npm i --save @fortawesome/react-fontawesome

Don't forget to use className instead of class.

Later on you need to import them in the file where you wanna use them.

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

or

import FontAwesomeIcon from '@fortawesome/react-fontawesome'

Answer 3

as 'Praveen M P' said you can install font-awesome as a package. if you have yarn you can run:

 yarn add font-awesome

If you don't have yarn do as Praveen said and do:

npm install --save font-awesome

this will add the package to your projects dependencies and install the package in your node_modules folder. in your App.js file add

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

Answer 4

If you are new to React JS and using create-react-app cli command to create the application, then run the following NPM command to include the latest version of font-awesome.

npm install --save font-awesome

import font-awesome to your index.js file. Just add below line to your index.js file

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

or

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

Don't forget to use className as attribute

 render: function() {
    return <div><i className="fa fa-spinner fa-spin">no spinner but why</i></div>;
}

Answer 5

Alexander's answer from above really helped me out!

I was trying to get social accounts icons in the footer of my app I created with ReactJS so that I could easily add a hover state to them while also having them link my social accounts. This is what I ended up having to do:

$ npm i --save @fortawesome/fontawesome-free-brands

Then at the top of my footer component I included this:

import React from 'react';
import './styles/Footer.css';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import {faTwitter, faLinkedin, faGithub} from '@fortawesome/fontawesome-free-brands';

My component then looked like this:

<a href='https://github.com/yourusernamehere'>
  <FontAwesomeIcon className ='font-awesome' icon={faGithub} />
</a>

Worked like a charm.

Answer 6

After struggling with this for a while I came up with this procedure (based on Font Awesome's documentation here):

As stated, you'll have to install fontawesome, react-fontawesome and fontawesome icons library:

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

and then import everything to your React app:

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

library.add(faStroopwafel)

Here comes the tricky part:

To change or add icons, you'll have to find the available icons in your node modules library, i.e.

<your_project_path>\node_modules\@fortawesome\free-solid-svg-icons  

Each icon has two relevant files: .js and .d.ts, and the file name indicates the import phrase (pretty obvious...), so adding angry, gem and check-mark icons looks like this:

import { faStroopwafel, faAngry, faGem, faCheckCircle } from '@fortawesome/free-solid-svg-icons'

library.add(faStroopwafel, faAngry, faGem, faCheckCircle)

To use the icons in your React js code, use:

<FontAwesomeIcon icon=icon_name/>

The icon name can be found in the relevant icon's .js file:

e.g. for faCheckCircle look inside faCheckCircle.js for 'iconName' variable:

...
var iconName = 'check-circle'; 
... 

and the React code should look like this:

<FontAwesomeIcon icon=check-circle/> 

Goodluck!