I'm trying to use a font next to my website's header in a react project I`m working on but it does not show.

I have imported the font-awesome package via yarn and imported the css of it in my index.js file but it does not show in my header.

index.js:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "../node_modules/font-awesome/css/font-awesome.min.css";

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

Header Component:

import React, { Component } from "react";

export default class Header extends Component {
  render() {
    return (
      <div>
        <div className="col-md-6 m-auto">
          <h1 className="text-center mb-3">
            <i className="fas fa-book-open"> </i>
            English Dictionary
          </h1>
        </div>
      </div>
    );
  }
}

Only the text of the header is shown. I checked the browser for any errors and it did not show any, also when i inspect the page i see the element.

<i className="fas fa-book-open"> </i>

I hope any of you can help me, thanks!

I'm trying to use a font next to my website's header in a react project I`m working on but it does not show.

I have imported the font-awesome package via yarn and imported the css of it in my index.js file but it does not show in my header.

index.js:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "../node_modules/font-awesome/css/font-awesome.min.css";

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

Header Component:

import React, { Component } from "react";

export default class Header extends Component {
  render() {
    return (
      <div>
        <div className="col-md-6 m-auto">
          <h1 className="text-center mb-3">
            <i className="fas fa-book-open"> </i>
            English Dictionary
          </h1>
        </div>
      </div>
    );
  }
}

Only the text of the header is shown. I checked the browser for any errors and it did not show any, also when i inspect the page i see the element.

<i className="fas fa-book-open"> </i>

I hope any of you can help me, thanks!

• javascript
• html
• reactjs
• font-awesome

• Does that particular icon exist in the version of FA you're loading? – isherwood Commented May 24, 2019 at 15:22

2 Answers 2

You will need to follow these steps to use font-awesome with react:

Install these dependencies:

npm i @fortawesome/fontawesome-svg-core # or yarn add @fortawesome/fontawesome-svg-core
npm i @fortawesome/free-solid-svg-icons # or yarn add @fortawesome/free-solid-svg-icons
npm i @fortawesome/react-fontawesome    # or yarn add @fortawesome/react-fontawesome

Make necessary imports where you need to use them:

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

Use in JSX:

<FontAwesomeIcon icon={faTimes} />

I strongly suggest you to use the react-icons package for all icon related things, it has a wide support of icon libraries and makes it very simple to use and bundle.

To use font-awesome icons,

import React from 'react'
import { FaAlignJustify } from "react-icons/fa";


const Home = () => {
  return (
    <div>Icon here - <FaAlignJustify/> </div>
  )
}

export default Home;