fontawesome icon not showing on desktop-CodePudding

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.

CodePudding user response：

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

CodePudding user response：

Did you follow all the steps from the documentation? The third step is to add the FontAwesomeIcon component and use it the following way:

<FontAwesomeIcon icon={faBars} />

Check the docs about how to use icons

PS: do not forget to import the component and the icon:

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