Having trouble getting the fontawesome icon to display properly on my website. It appears in inspect mode, but not on the actual site itself.
Any suggestions on how to fix 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;
CSS for max-width screen:
.fa-bars{
display: flex;
color: gold;
}
Appreciate any help or advice.
- Tried installing dependencies again
npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
Still unable to resolve the issue.
- Attempted deleting nodemodules directory.
- Restarted the application.
No luck so far.