react-fontawesome not displaying icons

Question

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!

Do you really need react font-awesome or just include font-awesome in index.html and use it normally. — duwalanise, Commented Mar 1, 2017 at 3:32
Basically the icon is there or else there wouldn't be any span there. I tried your code, it works perfectly fine on mine. Try changing css color property. — DroidNoob, Commented Mar 1, 2017 at 6:01
duwalanise, unfortunately in this case I need it all contained in the React component, ie I can't load the font-awesome.min.css in HTML file. — currenthandle, Commented Mar 1, 2017 at 19:08
DroidNoob, the icon is not there. The span tag could be there with out the icon showing, for instance if the associated CSS weren't loaded: a span tag with class=fa fa-rocket wouldn't show the icon. I tried changing the CSS color property at it didn't do anything. — currenthandle, Commented Mar 1, 2017 at 19:10

Alee · Accepted Answer · 2017-08-01 08:36:53Z

31

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>

answered Aug 1, 2017 at 8:36

Alee

7607 silver badges21 bronze badges

1

This solved my problem!! thanks a lot for the answer
– theusual
Commented Jan 26, 2018 at 22:23
1

For those of you who don't want to (or can't) use a CDN version, Font Awesome allows you to download the files and host yourself: fontawesome.com/how-to-use/on-the-web/setup/… This was helpful for me because I have an app that does not have access to outside networks for security purposes.
– aldefouw
Commented Jan 2, 2019 at 21:38
does beside adding this CDN you also need to add your kit? Should it be before or after this CDN link href?
– tikej
Commented Oct 10, 2021 at 21:35
What's the point of these packages besides overcomplicating life? What's wrong with ? The doc says to install 3 packages (!) and it still doesn't work out of the box, that's ridiculous.
– Robo Robok
Commented Nov 11, 2021 at 16:40

Add a comment |

Lanil Marasinghe · Accepted Answer · 2018-04-06 06:02:25Z

29

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';

answered Apr 6, 2018 at 6:02

Lanil Marasinghe

2,8851 gold badge24 silver badges25 bronze badges

1

I get an empty white rectangle after this.
– tikej
Commented Oct 10, 2021 at 21:23
1

Isn't that the older version?
– Robo Robok
Commented Nov 11, 2021 at 16:41
No such file...
– Richard Barraclough
Commented Mar 10, 2023 at 23:34

Add a comment |

Shishir · Accepted Answer · 2017-12-28 18:06:38Z

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

thanks, in react this is the only solution that worked for me so far — Sonic Soul, Commented Oct 22, 2020 at 17:55
This should be the accepted answer. Works with the latest version of Font Awesome after following instructions (v6). — cr1pto, Commented Aug 29, 2023 at 0:27

selmanioui · Accepted Answer · 2021-09-19 15:44:02Z

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

This answer works. Also, this answer is from fontawesome's official documentation. — austingae, Commented Jun 18, 2022 at 18:59
The official docs mention that a string literal can be used to specify the icon. That didn't work for me, it rendered nothing. The solution posted here with the explicit import works, thank you! — Martin Häusler, Commented Aug 24, 2023 at 19:12

blah blah · Accepted Answer · 2018-12-03 01:28:57Z

13

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"));

answered Dec 3, 2018 at 1:28

blah blah

4356 silver badges12 bronze badges

So there's only one problem with this that I am having an issue with, I cannot view the icons before using them. So I have to scroll through them. How do I deal with this issue?
– AdamTzur
Commented Jul 9, 2022 at 9:09

Add a comment |

Mohammad ABS Jabed · Accepted Answer · 2020-04-26 17:21:05Z

6

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

answered Apr 26, 2020 at 17:21

Mohammad ABS Jabed

3926 silver badges16 bronze badges

Add a comment |

Mohammad Tbeishat · Accepted Answer · 2022-01-30 20:05:42Z

4

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

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

answered Jan 30, 2022 at 20:05

Mohammad Tbeishat

1,0667 silver badges17 bronze badges

Add a comment |

Sisir · Accepted Answer · 2017-10-29 18:04:17Z

3

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 :)

answered Oct 29, 2017 at 18:04

Sisir

2,7956 gold badges51 silver badges85 bronze badges

Add a comment |

Jumshud · Accepted Answer · 2021-02-21 23:42:52Z

2

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

answered Feb 21, 2021 at 23:42

Jumshud

1,4251 gold badge15 silver badges20 bronze badges

Add a comment |

Aristias Maz · Accepted Answer · 2021-08-06 21:36:55Z

2

copy and paste in your html ...

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

answered Aug 6, 2021 at 21:36

Aristias Maz

292 bronze badges

1

Welcome to SO. Code-only answers don't score as well as those that explain how the code answers the question. When answering an old question with existing answers, it helps to explain how your answer is different from or improves on the others.
– rmlockerd
Commented Aug 8, 2021 at 3:10

Add a comment |

N.L. · Accepted Answer · 2017-04-12 01:01:22Z

1

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.

answered Apr 12, 2017 at 1:01

N.L.

112 bronze badges

Add a comment |

Shamseer Ahammed · Accepted Answer · 2020-04-27 03:16:13Z

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.

Paul Podgorsek · Accepted Answer · 2024-02-24 09:24:35Z

Here is a solution which works with FontAwesome 6+ in React, that makes it easy to combine icon packs such as the free and pro ones:

Add the FontAwesome dependencies to your project:

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

Declare all FA icons you would like to use in the root of your app:

import { library as fontAwesomeLibrary } from '@fortawesome/fontawesome-svg-core';
import {
  faPlugCircleMinus,
  faPlugCirclePlus,
  faSchool,
  faUsers,
} from '@fortawesome/free-solid-svg-icons';

fontAwesomeLibrary.add(
  faPlugCircleMinus,
  faPlugCirclePlus,
  faSchool,
  faUsers,
);

Use a shorthand syntax to display the icons in the relevant components, such as:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
...
const element = (
  <FontAwesomeIcon icon='school' />
);

Alternatively, as mentioned by other answers here, you could also import the individual icons whenever needed. The downside of this approach is that you would have to remember which pack each icon comes from every time you add one to a component:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSchool } from '@fortawesome/free-solid-svg-icons';
...
const element = (
  <FontAwesomeIcon icon={faSchool} />
)

Shogo Yahagi · Accepted Answer · 2024-05-03 22:34:40Z

For those using fontawesome in MUI, there's an extra step you need to take with React.forwardRef and @mui/material/SvgIcon:

https://mui.com/material-ui/icons/#font-awesome

Make their sample code a component.

FontAwesomeSvgIcon.tsx

import React from 'react'

import SvgIcon from '@mui/material/SvgIcon'

type FontAwesomeSvgIconProps = {
  icon: any
}

const FontAwesomeSvgIcon = React.forwardRef<SVGSVGElement, FontAwesomeSvgIconProps>(
  (props, ref) => {
    const { icon } = props

    const {
      icon: [width, height, , , svgPathData],
    } = icon

    return (
      <SvgIcon ref={ref} viewBox={`0 0 ${width} ${height}`}>
        {typeof svgPathData === 'string' ? (
          <path d={svgPathData} />
        ) : (
          /**
           * A multi-path Font Awesome icon seems to imply a duotune icon. The 0th path seems to
           * be the faded element (referred to as the "secondary" path in the Font Awesome docs)
           * of a duotone icon. 40% is the default opacity.
           *
           * @see https://fontawesome.com/how-to-use/on-the-web/styling/duotone-icons#changing-opacity
           */
          svgPathData.map((d: string, i: number) => (
            <path key={i} style={{ opacity: i === 0 ? 0.4 : 1 }} d={d} />
          ))
        )}
      </SvgIcon>
    )
  }
)

FontAwesomeSvgIcon.displayName = 'FontAwesomeSvgIcon'

export default FontAwesomeSvgIcon

Then use it in your code without knowing all that MUI details:

import React from 'react'

import {
  faPinterestP,
} from '@fortawesome/free-brands-svg-icons'

import {
  FontAwesomeSvgIcon,
} from './FontAwesomeSvgIcon.tsx'

...etc...

<FontAwesomeSvgIcon icon={faPinterestP} />

ravibagul91 · Accepted Answer · 2019-09-15 12:48:19Z

-1

Try adding

<script src='https://use.fontawesome.com/3bd7769ce1.js'></script>

to your main index.html within your react project.

edited Sep 15, 2019 at 12:48

ravibagul91

20.6k6 gold badges37 silver badges61 bronze badges

answered Mar 8, 2017 at 16:20

Steve

31

That won't do any good, that's not the React-version of fontawesome
– Patrick Hund
Commented Mar 8, 2017 at 17:54

Add a comment |

Collectives™ on Stack Overflow

react-fontawesome not displaying icons

15 Answers 15

Not the answer you're looking for? Browse other questions tagged
reactjs
font-awesome
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

15 Answers 15

Not the answer you're looking for? Browse other questions tagged reactjsfont-awesome or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
reactjs
font-awesome
or ask your own question.