CODEWITHSUNDEEP
reactjs
RRR uzumaki
RRR uzumaki

Reputation: 1328

Adding font-awesome icons to my react app

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 ?

Upvotes: 3

Views: 12867

Answers (2)

Bharadwaj Poduri
Bharadwaj Poduri

Reputation: 179

Hi no need of installing fontawesome libraries if you just import your fontawesome kit in the head tag of public/index.html

You can find url for your fontawesome kit in fontawesome website.

just put this script in public/index.html under head tag, it should work.

Upvotes: -1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

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>

Upvotes: 14

Related Questions