'react-fontawesome not displaying icons

I'm attempting to using react-fontawesome and implementing it in what seems to me to be exactly the same as the readme: https://github.com/danawoodman/react-fontawesome/blob/master/readme.md

import React from 'react';
import FontAwesome from 'react-fontawesome'
...
export default class ComponentName extends React.Component {
    render() {
        return (
            <div>
                <div>
                    <span>
                        <FontAwesome
                            className='super-crazy-colors'
                            name='rocket'
                            size='2x'
                            spin
                            style={{ textShadow: '0 1px 0 rgba(0, 0, 0, 0.1)' }}
                        />
                        SOME TEXT
                    </span>
                </div>
                ...
            </div>
        )
    }
}

But I'm not seeing an icon in the DOM. Although I do see in the Chrome Dev Tools:

<span style="text-shadow:0 1px 0 rgba(0, 0, 0, 0.1);" aria-hidden="true" class="fa fa-rocket fa-2x fa-spin super-crazy-colors" data-reactid=".0.$/=11.0.0.$/=10.$/=10.$/=10"></span>

which I feel like should be a  tag. I tried changing the ... to an ... in "edit as HTML" in the dev tools and the icon still didn't show.

I have add-module-exports in my plugins and stage-2 in my presets in my webpack.config.

Can anyone tell me if I'm missing something? Do I need some other package other than react-fontawesome to make this work? Do I need to import the standard font-awesome.css or load a font-awesome CDN? Any help would be greatly appreciated, thanks!

reactjs font-awesome

Solution 1:^[1]

I had the same problem. Read their Readme.md, and you see that there is this note:

Note: This component does not include any of the Font Awesome CSS or fonts, so you'll need to make sure to include those on your end somehow, either by adding them to your build process or linking to CDN versions.

So the most simple way is to link to the fontawesome cdn in your html.

<head>
<meta charset="UTF-8">    
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet" integrity="sha384-
wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" 
crossorigin="anonymous">
</head>

Solution 2:^[2]

Run npm install font-awesome --save

In your index.js or App.js or YourComponent.js, import the minified CSS file.

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

Solution 3:^[3]

As the other answers mention, you need to include the icons in your page somehow. Check out the react-fontawesome example here: https://github.com/danawoodman/react-fontawesome/blob/master/examples/index.html

You can see that the developer has included the font-awesome CSS on line #5.

On a separate note, Font Awesome v5 has been released, and you should consider moving to it. Read relevant docs here: https://www.npmjs.com/package/@fortawesome/react-fontawesome

To use v5:

Install dependencies:

$ npm i --save @fortawesome/fontawesome
$ npm i --save @fortawesome/react-fontawesome
$ npm i --save @fortawesome/fontawesome-free-solid

Your component can then use icons like so:

import ReactDOM from 'react-dom';
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/fontawesome-free-solid'

const element = (
  <FontAwesomeIcon icon={faCoffee} />
)

ReactDOM.render(element, document.body);

You can also build a library of commonly used icons in your app, for easy reference. Check out working code here: https://codesandbox.io/s/8y251kv448

More details about the library function available here: https://www.npmjs.com/package/@fortawesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app-more-conveniently

Solution 4:^[4]

The only example I got working that actually seems up-to-date and didn't throw "can't resolve 'react' errors:

https://scotch.io/tutorials/using-font-awesome-5-with-react

import React from "react";
import { render } from "react-dom";

// get our fontawesome imports
import { faHome } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

// create our App
const App = () => (
  <div>
    <FontAwesomeIcon icon={faHome} />
  </div>
);

// render to #root
render(<App />, document.getElementById("root"));

Solution 5:^[5]

This seems to work perfectly for React

Installation:

$ yarn add @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

Usage:

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

const element = <FontAwesomeIcon icon={faCoffee} />

ReactDOM.render(element, document.body)

Font Awesome 5 React

Solution 6:^[6]

Font Awesome now has an official React component that’s available to use their icons in your React applications.

Step 1 : you must install 3 important packages in your project using a package manager like npm:

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

Step 2 : if you're planning on styling the icons you must download these two extra packages :

     npm install --save @fortawesome/free-brands-svg-icons
     npm install --save @fortawesome/free-regular-svg-icons

Step 3: Once you’ve installed all the packages you need for your project, now you can use the icons. Import this packages in your component like this:

   import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

After that you can import an icon into your component like this (example using an icon with the class as "fas fa-atom")

   import { faAtom } from '@fortawesome/free-solid-svg-icons'

P.S : you can import multiple icons in one import with adding a coma between each one.

Step 4 : use the imported icons

const element = <FontAwesomeIcon icon={faAtom} />

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

Solution 7:^[7]

As @Alee pointed out Fontaweome fonts aren't included in the package. You will have to import it yourself.

Install npm font-awesome package. If you use npm run npm install font-awesome --save or if you use yarn then run yarn add font-awesome
Now you just have to import font-awesome.less under less directory by writing import 'font-awesome/less/font-awesome.less'

Now you should see your icons working :)

Solution 8:^[8]

import fontawesome styles from the package itself without loading any external css:

import "@fortawesome/fontawesome-svg-core/styles.css"; // import Font Awesome CSS
import { config } from "@fortawesome/fontawesome-svg-core";
config.autoAddCss = false; // Tell Font Awesome to skip adding the CSS automatically since it's being imported above

See article to get more info

Solution 9:^[9]

copy and paste in your html ...

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">

Solution 10:^[10]

NEXT JS - Import styles this way if you are using NEXT jS

import '../node_modules/@fortawesome/fontawesome-svg-core/styles.css'

Solution 11:^[11]

I suspect that you have not yet imported the CSS that FontAwesome needs - download the minified CSS file from FontAwesome's Web site and import it into your app.scss file or wherever else you're importing other stylesheets.

The react-fontawesome library is helping you create elements with class names like 'up-arrow', but without the stylesheet, your project will not know that there are icons corresponding to those classes.

Solution 12:^[12]

Better to install everything all at once and then only import the icon you want,

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

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

make sure to import the icon from the exact pack, you can use ctrl + space to use the power of suggections to fiding icons and for changing pack when your importing icon.

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	Alee
Solution 2	Lanil Marasinghe
Solution 3	Shishir
Solution 4	blah blah
Solution 5	Mohammad ABS Jabed
Solution 6
Solution 7	Sisir
Solution 8	Jumshud
Solution 9	Aristias Maz
Solution 10	Mohammad Tbeishat
Solution 11	N.L.
Solution 12	Shamseer Ahammed

'react-fontawesome not displaying icons

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]