Adding font-awesome icons to my react app

Question

Hey just started with React so i download font awesome via npm and imported font-awesome.min.css file in App.js by

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

now below are two codes

 <i className="fa fa-sun"/>
 <i className="fa fa-spinner fa-spin"/>

The first one does not work but the second one which i copy pasted from a stackoverflow answer works pretty weird. How can i resolve this ?

Solution

I have got the same error here in my CodeSandbox. The problem with FontAwesome package is that it tries to use the fonts from the node_modules directory and it's not possible from the client side.

Also, please note that your icons are wrong. They should be:

<i className="fa fa-sun-o"/>
<i className="fa fa-spinner fa-spin"/>

Font Awesome now has an official React component that’s available for all who want to use our icons in their React projects.

First, grab the packages for Font Awesome SVG Core, the Free solid icon package, and the Font Awesome React component:

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

Then in your app, import and add an icon to the Library:

App.js

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

library.add(faStroopwafel)

Lastly, use the component and icon in your JSX:

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export const Food = () => (
  <div>
    Favorite Food: <FontAwesomeIcon icon="stroopwafel" />
  </div>
)

Reference: How to Install and Use FontAwesome with React.

---

Another simple way is to use a FontAwesome CDN:

@import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

Working snippet here: CodeSandbox

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <i className="fa fa-sun-o" />
      <i className="fa fa-spinner fa-spin" />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

@import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

.App {
  font-family: sans-serif;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Comments

[Zohaib Ijaz]

After following instructions in below answer, you have fixed your issue so It's time to appreciate the person who helped you by marking the answer as selected. He have put a huge answer and you did not say a simple Thank you