fontawesome icon not showing on desktop

November 29, 2022

I seem to be having an issue to display the fontawesome icon in my browser. It does show in inspect, but not on my website itself.

Does anyone know how to resolve this issue?

import React, { Fragment, useState} from "react";
import { NavLink } from "react-router-dom";
import "../styles/common/Navbar.css";


const Navbar = () => {
    const [showMenu, setShowMenu] = useState(false);

    return (
      <Fragment>
          <nav>
              <a href="/">
              <h1>AnRa<span>Caribbean</span></h1>
              </a>
              <div className={showMenu ? "menu mobile-menu" : "menu"}>
                  <ul>
                      <li><NavLink to="/">Home</NavLink></li>
                      <li><NavLink to="/PropertiesForSale">Buy a Property</NavLink></li>
                      <li><NavLink to="/PropertiesForRent">Rent a Property</NavLink></li>
                      <li><NavLink to="/About">About</NavLink></li>
                      <li><NavLink to="/Contact">Contact</NavLink></li>
                  </ul>
                  <button className="btn">
                      <NavLink to="#">Add Property</NavLink>
                  </button>
              </div>
              <i className="fa fa-solid fa-bars" onClick={() => setShowMenu(!showMenu)}></i>

          </nav>
      </Fragment>
    );
}

export default Navbar;

Web view

How I have it in css from max-width screen.
`

.fa-bars{
    display: flex;
    color: gold;
}

Thank you in advance

downloaded

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

still nothing.

tried deleting nodemodules.
restarted the application.

nothing seem to work.

>Solution :

Based on Font Awesome docs, it should be used like the following:

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

const App = () => {
   return (<div><FontAwesomeIcon icon={faCoffee} /></div>)
}

export default App