react-fontawesome not displaying icons
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>
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';
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-solidYour 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