Using font-awesome in React JS

Question

I'm new to React JS and I'm trying to add font-awesome into my project. I have installed Node.js and npm. I have also included the following packages:

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

Now, what should I do in index.js to be able to access all fonts and icons from these packages? I have checked multiple sources and information differs from site to site. Could you please explain how it's done and what should be written after "import" at the top of the file.

Khachik · Accepted Answer · 2021-10-20 19:08:21Z

4

Also you can import all free font awesome icons with fas and fab prefixes in this way.

At first you need to install these packages.

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

And then add fas and fab prefixes from FA lib to your root file

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

library.add(fas, fab);

const App = () => {
  return (
    <div>
      <!-- Icon of fas prefix -->
      <FontAwesomeIcon icon="home" />
      <!-- Icon of fab prefix -->
      <FontAwesomeIcon icon={['fab', 'google']} />
    </div>
  );
};

export default App;

edited Oct 20, 2021 at 19:08

answered Jun 22, 2020 at 16:34

Khachik

714 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Private · Accepted Answer · 2020-06-22 16:16:37Z

2

First, make sure your package.json has font-awesome. If it does not use npm i font-awesome to install it.
Second, You need to import the fonts that are in css folder of font-awesome. Add the line to your index.js file. import "../node_modules/font-awesome/css/font-awesome.min.css";

edited Jun 22, 2020 at 16:16

answered Jun 22, 2020 at 16:10

Private

1,7913 gold badges23 silver badges56 bronze badges

Comments

ludwiguer · Accepted Answer · 2020-06-22 16:08:52Z

0

That information is inside the docs, here is the extract for imports

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)

https://github.com/FortAwesome/react-fontawesome#explicit-import

answered Jun 22, 2020 at 16:08

ludwiguer

2,2552 gold badges17 silver badges21 bronze badges

3 Comments

Vipul Tyagi Over a year ago

Let me give you my honest opinion. You want to include it in your react code, no problem. But I really think you should use the CDN for fontawesome. It will help decrease your bundle size when you deploy your app.

Vipul Tyagi Over a year ago

In addition to that, you also need plugin in webpack to bundle them along. That will add to your pain.

Dev Over a year ago

Thank you for sharing this! Since I'm just staring React JS, the concept of packages and npm is something new to me. That's why I asked this question just to see how it works so in the future I know all options of usage that are out there :)

Cavein Muthama · Accepted Answer · 2021-01-05 16:32:41Z

0

Just stop the node application, install babel-loader finally run npm start. That should solve your problem.

answered Jan 5, 2021 at 16:32

Cavein Muthama

351 silver badge9 bronze badges

Comments

Kanish · Accepted Answer · 2021-01-08 15:58:32Z

0

Great Source to the point.

https://www.digitalocean.com/community/tutorials/how-to-use-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 Jan 8, 2021 at 15:58

Kanish

3214 silver badges12 bronze badges

Collectives™ on Stack Overflow

Using font-awesome in React JS

5 Answers 5

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related