react-fontawesome not displaying icons

29
votes

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 <i> tag. I tried changing the <span>...</span> to an <i>...</i> 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!

11
reactjsfont-awesome
Do you really need react font-awesome or just include font-awesome in index.html and use it normally. - duwalanise
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
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. - Casey
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. - Casey
@Casey check this stackoverflow.com/a/44681641/5519872 - Rajendran Nadar

11 Answers

29
votes

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>
20
votes

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

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

6
votes

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

5
votes

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

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

  1. 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

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

1
votes

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

0
votes

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.

0
votes

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.

0
votes

copy and paste in your html ...

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

Try adding 

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

to your main index.html within your react project.