74

I have a project on React and I need to integrate FontAwesome to it. I found official library and installed it as instructed in readme

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

When I try to use it in my code like this:

<FontAwesomeIcon icon='plus'/>
<FontAwesomeIcon icon={['fa', 'coffee']}/>

I am getting this error on the console:

Could not find icon {prefix: "fas", iconName: "plus"}
Could not find icon {prefix: "fa", iconName: "coffee"}

I tried to include FontAwesome css link to head but it didn't help. I am using npm v4.6.1; node v8.9.1; react v16.2.

iamawebgeek
  • 2,713
  • 1
  • 18
  • 34

7 Answers7

86

You need to add any icons you wish to use, to a "library" for easy reference.

import React from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import fontawesome from '@fortawesome/fontawesome'
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import { faCheckSquare, faCoffee } from '@fortawesome/fontawesome-free-solid'

const styles = {
  fontFamily: 'sans-serif',
  textAlign: 'center',
};

fontawesome.library.add(faCheckSquare, faCoffee);

const App = () => (
  <div style={styles}>
    <FontAwesomeIcon icon="check-square" /><br /><br />
    <FontAwesomeIcon icon="coffee" />
  </div>
);

render(<App />, document.getElementById('root'));

Check out working code here: https://codesandbox.io/s/8y251kv448

Also, read this: https://www.npmjs.com/package/@fortawesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app-more-conveniently

Shishir
  • 2,488
  • 20
  • 22
  • 1
    just adding import @fortawesome/fontawesome-free-solid statement helped, but there is no import in react-fontawesome demo – iamawebgeek Jan 04 '18 at 08:26
  • In the meanwhile the [fortawesome/fontawesome npm package](https://www.npmjs.com/package/@fortawesome/fontawesome) is deprecated. Would be helpful to adjust the code above. – jengeb Oct 24 '18 at 14:52
  • My mistake! I was writing in camel case in value to icon as well i.e. `faCheckSquare` – Adil Mar 30 '19 at 20:41
  • My mistake was an unnecessary `import {faSync} from ... @fortawesome... `despite using the `FontAwesome icon="sync" />` tag – Vikram K Apr 26 '19 at 08:28
50

Just in case there are other idiots out there like me, make sure that you use the right name in referencing the icons.

I had

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faUser } from "@fortawesome/free-solid-svg-icons";

library.add(faUser);

and

render() {
  return (        
    <FontAwesomeIcon icon="faUser" />
  );
}

when, in fact, the actual icon name is just "user", not "faUser":

render() {
  return (        
    <FontAwesomeIcon icon="user" />
  );
}
J.D. Mallen
  • 4,339
  • 3
  • 22
  • 33
  • What's interesting is I called `` and added `fontawesome.library.add(faCoffee)` (after `import { faCoffee } from '...'`) and it worked, I got the circle icon. But if I didn't add anything to the library, nothing would work. – Belladonna Jun 15 '18 at 21:04
  • like sorry, but what the pardon "heck" is the company doing? not in any of their docs I have read about that you have to call library add, to make the icon available... it's a simple task of adding icons and somehow they managed to do it so highly complicated. Sorry to write it beneath your solution but I am just baffled... Thank you for this solution. – tikej Oct 10 '21 at 21:53
  • @tikej, I am puzzled by the same. Like who on earth within the company wrote the library in such a way? The pattern and unnecessary lines of code we add to just get an Icon are weirdly out of this world. – Blessed Jason Mwanza Jan 07 '22 at 09:44
  • Apparently, this seems to work: ```javascript import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faHome } from "@fortawesome/free-solid-svg-icons"; ``` – Blessed Jason Mwanza Jan 07 '22 at 09:50
35

You can use FontAwesome icons without library like this:

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

<FontAwesomeIcon icon={faCoffee} />

I've installed all the necessary packages as react-fontawesome says:

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/react-fontawesome
Vladimir Vlasov
  • 1,860
  • 3
  • 25
  • 38
11

And if you find yourself not seeing your icon when trying to display faTrashAlt (or similarly named icon), not only do you have to remove the 'fa' when actually using your icon but also you have to convert the icon name from cameCase to "lisp-case".

So, after loading the alternative trash can icon this way:

fontawesome.library.add(faTrashAlt);

It's then used that way:

<FontAwesomeIcon icon="trash-alt" />

Just so you don't waste 20 precious minutes of your time.

Thomas
  • 1,956
  • 14
  • 21
9

Just because there is more than one way to get a fontawesome icon into a website, I'll give an example with react and fontawesome and explicit import. Explicit import is frugal. Only the exact icon from the fontawesome icon set is imported and the FontAwesomeIcon component icon attribute is set to the imported object instead of the name.

Example:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
import { faHistory } from '@fortawesome/pro-regular-svg-icons';

function exampleReactComponent() {
   return (
     <div>
       <p><FontAwesomeIcon icon={faCoffee}/></p>
       <p><FontAwesomeIcon icon={faHistory}/></p>
     </div>
   );
}

I don't disagree with setting the icon attribute of the FontAwesomeIcon by name it's just that I encountered console errors about finding icons by name and the resolution I discovered is to reference the object. Note the icon={} notation because it is different than using a quoted string of the icon name.

Explicit Import... react-fontawesome npm package github link

Installing with npm... installing fontawesome with npm link

starpebble
  • 504
  • 3
  • 7
7

To pass the icon path using an array like this

icon={['fa', 'coffee']}

You'll need to import all references of the library in a file and import this file in the index of your React app.

Example, create the file named fonts.js

import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/pro-solid-svg-icons';
import { far } from '@fortawesome/pro-regular-svg-icons';
import { fal } from '@fortawesome/pro-light-svg-icons';
import { fad } from '@fortawesome/pro-duotone-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';

library.add(fab);
library.add(fas);
library.add(far);
library.add(fal);
library.add(fad);

Now in the index.js of your app import the file that was created,

import '../configs/fonts.js'

This path is just an example, be sure that you are putting the right one.

Jader Vinícius Gonzaga Moura
  • 81
  • 1
  • 2
3

For the free version of FontAwesome ;) @fortawesome

Install FontAwesome

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

Use it

...
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
import '@fortawesome/fontawesome-free'
import {library} from '@fortawesome/fontawesome-svg-core'
import {far} from '@fortawesome/free-regular-svg-icons'
import {fas} from '@fortawesome/free-solid-svg-icons'
import {fab} from '@fortawesome/free-brands-svg-icons'
library.add(far,fas,fab);


...

<span className='fa fa-coffee'/>
<FontAwesomeIcon icon='coffee' />
<FontAwesomeIcon icon={['fas', 'coffee']}/>
<FontAwesomeIcon icon={['fab','react']}/>
Cristian Florescu
  • 1,660
  • 20
  • 24