Source:  Twitter logo

Whenever I try to use a Font Awesome icon in React's render(), it isn't displayed on the resulting web page although it works in normal HTML.

render: function() {
    return <div><i class="fa fa-spinner fa-spin">no spinner but why</i></div>;
}

Here is an live example: http://jsfiddle.net/pLWS3/

Where is the fault?

If you are new to React JS and using create-react-app cli command to create the application, then run the following NPM command to include the latest version of font-awesome.

npm install --save font-awesome

import font-awesome to your index.js file. Just add below line to your index.js file

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

or

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

Don't forget to use className as attribute

 render: function() {
    return <div><i className="fa fa-spinner fa-spin">no spinner but why</i></div>;
}
363 users liked answer #0dislike answer #0363
Praveen M P profile pic
Praveen M P

React uses the className attribute, like the DOM.

If you use the development build, and look at the console, there's a warning. You can see this on the jsfiddle.

Warning: Unknown DOM property class. Did you mean className?

62 users liked answer #1dislike answer #162
Brigand profile pic
Brigand

https://github.com/FortAwesome/react-fontawesome

install fontawesome & react-fontawesome

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

then in your component

import React, { Component } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCheckSquare, faCoffee } from '@fortawesome/fontawesome-free-solid'
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>
          <FontAwesomeIcon icon={faCoffee} />
        </h1>
      </div>
    );
  }
}

export default App;
44 users liked answer #2dislike answer #244
Alexander Sidikov Pfeif profile pic
Alexander Sidikov Pfeif

You can also use the react-fontawesome icon library. Here's the link: react-fontawesome

From the NPM page, just install via npm:

npm install --save react-fontawesome

Require the module:

var FontAwesome = require('react-fontawesome');

And finally, use the <FontAwesome /> component and pass in attributes to specify icon and styling:

var MyComponent = React.createClass({
  render: function () {
    return (
      <FontAwesome
        className='super-crazy-colors'
        name='rocket'
        size='2x'
        spin
        style={{ textShadow: '0 1px 0 rgba(0, 0, 0, 0.1)' }}
      />
    );
  }
});

Don't forget to add the font-awesome CSS to index.html:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

36 users liked answer #3dislike answer #336
Amituuush profile pic
Amituuush
npm install --save-dev @fortawesome/fontawesome-free

in index.js

import '@fortawesome/fontawesome-free/css/all.min.css';

then use icons like below :

import React, { Component } from "react";

class Like extends Component {
  state = {};
  render() {
    return <i className="fas fa-heart"></i>;
  }
}

export default Like;
31 users liked answer #4dislike answer #431
Prasobh.Kollattu profile pic
Prasobh.Kollattu

The simplest solution is:

Install:

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

Import:

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

Use:

<FontAwesomeIcon icon={ faThumbsUp }/>
19 users liked answer #5dislike answer #519
Jackkobec profile pic
Jackkobec
npm install --save font-awesome

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

then

<i className="fa fa-shopping-cart" style={{fontSize:24}}></i>  
        <span className="badge badge-danger" style={{position:"absolute", right:5, top:5}}>number of items in cart</span>
13 users liked answer #6dislike answer #613
Hazem AbdelHamid profile pic
Hazem AbdelHamid

In case you are looking to include the font awesome library without having to do module imports and npm installs, put this in the head section of your React index.html page:

public/index.html (in head section)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

Then in your component (such as App.js) just use standard font awesome class convention. Just remember to use className instead of class:

<button className='btn'><i className='fa fa-home'></i></button>

10 users liked answer #7dislike answer #710
Matt C. profile pic
Matt C.

You need to install the package first.

npm install --save react-fontawesome

OR

npm i --save @fortawesome/react-fontawesome

Don't forget to use className instead of class.

Later on you need to import them in the file where you wanna use them.

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

or

import FontAwesomeIcon from '@fortawesome/react-fontawesome'
6 users liked answer #8dislike answer #86
Karan Patokar profile pic
Karan Patokar

After struggling with this for a while I came up with this procedure (based on Font Awesome's documentation here):

As stated, you'll have to install fontawesome, react-fontawesome and fontawesome icons library:

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

and then import everything to your React app:

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

library.add(faStroopwafel)

Here comes the tricky part:

To change or add icons, you'll have to find the available icons in your node modules library, i.e.

<your_project_path>\node_modules\@fortawesome\free-solid-svg-icons  

Each icon has two relevant files: .js and .d.ts, and the file name indicates the import phrase (pretty obvious...), so adding angry, gem and check-mark icons looks like this:

import { faStroopwafel, faAngry, faGem, faCheckCircle } from '@fortawesome/free-solid-svg-icons'

library.add(faStroopwafel, faAngry, faGem, faCheckCircle)

To use the icons in your React js code, use:

<FontAwesomeIcon icon=icon_name/>

The icon name can be found in the relevant icon's .js file:

e.g. for faCheckCircle look inside faCheckCircle.js for 'iconName' variable:

...
var iconName = 'check-circle'; 
... 

and the React code should look like this:

<FontAwesomeIcon icon=check-circle/> 

Goodluck!

6 users liked answer #9dislike answer #96
Naor Bar profile pic
Naor Bar

as 'Praveen M P' said you can install font-awesome as a package. if you have yarn you can run:

 yarn add font-awesome

If you don't have yarn do as Praveen said and do:

npm install --save font-awesome

this will add the package to your projects dependencies and install the package in your node_modules folder. in your App.js file add

import 'font-awesome/css/font-awesome.min.css'
5 users liked answer #10dislike answer #105
Jack Gerrard profile pic
Jack Gerrard

Alexander's answer from above really helped me out!

I was trying to get social accounts icons in the footer of my app I created with ReactJS so that I could easily add a hover state to them while also having them link my social accounts. This is what I ended up having to do:

$ npm i --save @fortawesome/fontawesome-free-brands

Then at the top of my footer component I included this:

import React from 'react';
import './styles/Footer.css';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import {faTwitter, faLinkedin, faGithub} from '@fortawesome/fontawesome-free-brands';

My component then looked like this:

<a href='https://github.com/yourusernamehere'>
  <FontAwesomeIcon className ='font-awesome' icon={faGithub} />
</a>

Worked like a charm.

4 users liked answer #11dislike answer #114
Emily Kuckelman profile pic
Emily Kuckelman

Personally, I found react-fontawesome to be unwieldy because of the way it requires each icon to be individually imported. If you would like to use Font Awesome version 5 with React without using react-fontawsome, you can do it as follows:

<link href="%PUBLIC_URL%/fontawesome/css/all.css" rel="stylesheet">

You can now use Font Awesome icons in the usual way:

<i className="fas fa-globe-europe"></i>
4 users liked answer #12dislike answer #124
Jamie McLaughlin profile pic
Jamie McLaughlin

I was experienced this case; I need the react/redux site that should be working perfectly in production.

but there was a 'strict mode'; Shouldn't lunch it with these commands.

yarn global add serve
serve -s build

Should working with only click the build/index.html file. When I used fontawesome with npm font-awesome, it was working in development mode but not working in the 'strict mode'.

Here is my solution:

public/css/font-awesome.min.css
public/fonts/font-awesome.eot 
*** other different types of files(4) ***
*** I copied these files for node_module/font-awesome ***
*** after copied then can delete the font-awesome from package.json ***

in public/index.html

<link rel="stylesheet" href="%PUBLIC_URL%/css/font-awesome.min.css">

After all of above steps, the fontawesome works NICELY!!!

2 users liked answer #13dislike answer #132
smartworld-dm profile pic
smartworld-dm

In my case I was following the documentation for react-fontawesome package, but they aren't clear about how to call the icon when setting the icons into the library

this is was what I was doing:

App.js file

import {faCoffee} from "@fortawesome/pro-light-svg-icons";
library.add(faSearch, faFileSearch, faCoffee);

Component file

<FontAwesomeIcon icon={"coffee"} />

But I was getting this error

Then I added the alias when passing the icon prop like:

<FontAwesomeIcon icon={["fal", "coffee"]} />

And it is working, you can find the prefix value in the icon.js file, in my case was: faCoffee.js

1 users liked answer #14dislike answer #141
Erick Garcia profile pic
Erick Garcia

If someone wants to do it via the Official documentation. Here is how I did and what I understood.

  1. Install the library as mentioned on font awesome page using npm or yarn for example in general I used these
  npm i --save @fortawesome/fontawesome-svg-core
  npm install --save @fortawesome/free-solid-svg-icons
  npm install --save @fortawesome/react-fontawesome
  1. You need two import library from '@fortawesome/fontawesome-svg-core' if you want to use in general or globally, it provides the access to the icons everywhere in your project.
  import { library } from '@fortawesome/fontawesome-svg-core';
  1. To use the icons you need to import them based on the npm or yarn library you have installed. I would recommend importing this in App.js where it will be easily visible. Like If I was using a free-tier shopping cart icon and it was solid you can import like below (if you are not sure if its solid, regular, etc or what library just click on the icon it will list out the different versions and based on the icon you like you can import the library for react).
  import { faShoppingCart } from '@fortawesome/free-solid-svg-icons';
  • for adding the icon name I would recommend writing the import statement and library and then precede with fa and start typing the name it will auto-recommend as soon as you type (checked in VSCode) which will make it less complicated to find.
  1. You need to add the icons in the library for making it accessible globally in your project separated by a comma
library.add( faCheckSquare, faAmbulance, faShoppingCart);
  1. After which you can import the following component
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

and use it like below wherever you need the icon. For the name, it's the same as listed on the style class on the FontAwesome site, for the icons. eg: shopping cart is listed as shopping-cart

<FontAwesomeIcon icon="shopping-cart" />

It should work now after this.

1 users liked answer #15dislike answer #151
innocent profile pic
innocent

Checkout react icons pretty dope and worked well.

0 users liked answer #16dislike answer #160
theterminalguy profile pic
theterminalguy

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).