We Keep Coding

fontawesome icon not showing on desktop

I seem to be having an issue displaying 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 seems to work.

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

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';

How can i route my Home component from the code below without throwing uncaught TypeError in the console

I'm having troubles displaying the Home component. How can I get this to work?
console display Uncaught TypeError: Cannot read properties of undefined (reading 'string')
at ./node_modules/react-icon/lib/index.js
I'm using
my versions are:
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-icon": "^1.0.0",
"react-icons": "^4.4.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
And my codes are:
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
My codes are:
Navbar.js
import React from 'react'
import './NavbarStyles.css'
import Logo from '../assets/logo.png'
import {Link} from 'react-router-dom'
import {FaBars,} from 'react-icon'
const Navbar = () => {
return (
<header>
<nav className='navbar'>
<div className='logo'>
<Link to='/'><img src={Logo} alt='' /></Link>
</div>
<ul className='nav-menu'>
<li className='nav-item'>
<Link to='/' className='nav-link'>Home</Link>
</li>
<li className='nav-item'>
<Link to='/' className='nav-link'>Services</Link>
</li>
<li className='nav-item'>
<Link to='/' className='nav-link'>Events</Link>
</li>
<li className='nav-item'>
<Link to='/' className='nav-link'>Contact</Link>
</li>
</ul>
<div className='hamburger'>
<FaBars />
</div>
</nav>
</header>
)
}
export default Navbar;
My codes are:
App.js
import React from 'react';
import {Routes, Route} from 'react-router-dom';
import Home from './components/Home';
function App() {
return (
<>
<Routes>
<Route path='/' element={<Home />} />
</Routes>
</>
);
}
export default App;
My codes are:
Home.js
import React from 'react'
import './HomeStyles.css'
import Navbar from './Navbar'
const Home = () => {
return (
<div>
<Navbar />
</div>
)
}
export default Home;

Issue
I think the issue is in the NavBar component. It is trying to import a named export from react-icon. react-icon doesn't export any specific icon components, instead it exports a single default export (i.e. import Icon from 'react-icon';) that uses props to specify which icon should be rendered. react-icon looks like an older/outdated package that fails to work with newer versions (React 15.5+) of React.
react-icon/src/index.js
const React = require('react');
const Icon = React.createClass({
displayName: 'Icon',
propTypes: {
glyph: React.PropTypes.string.isRequired, // <-- issue likely here
classPrefix: React.PropTypes.string,
children: React.PropTypes.node
},
statics: {
defaultFontPrefix: 'fa',
setDefaultFontPrefix(prefix) {
Icon.defaultFontPrefix = prefix;
}
},
render() {
const prefix = this.props.classPrefix || Icon.defaultFontPrefix;
let className = `${prefix} ${prefix}-${this.props.glyph}`;
if (this.props.className) {
className += ` ${this.props.className}`;
}
return (
<span {...this.props} className={className}>
{this.props.children}
</span>
);
}
});
module.exports = Icon;
React removed the PropTypes into its own package since React 15.5, so in the code above React.PropTypes is undefined and throws an error when trying to access the string property object.
Solution
Import the FaBars icon from react-icons instead of react-icon.
import React from 'react';
import './NavbarStyles.css';
import Logo from '../assets/logo.png';
import { Link } from 'react-router-dom';
import { FaBars } from 'react-icons'; // <-- import from `react-icons`
const Navbar = () => {
return (
<header>
<nav className='navbar'>
<div className='logo'>
<Link to='/'><img src={Logo} alt='' /></Link>
</div>
<ul className='nav-menu'>
<li className='nav-item'>
<Link to='/' className='nav-link'>Home</Link>
</li>
<li className='nav-item'>
<Link to='/' className='nav-link'>Services</Link>
</li>
<li className='nav-item'>
<Link to='/' className='nav-link'>Events</Link>
</li>
<li className='nav-item'>
<Link to='/' className='nav-link'>Contact</Link>
</li>
</ul>
<div className='hamburger'>
<FaBars />
</div>
</nav>
</header>
);
};
You'll probably want to also remove react-icon from your project since it's so outdated. As of today (13/06/2022) the repo hasn't had an update in 7 years! Uninstall it by running the following command from the project's root directory.
npm uninstall --save react-icon

import React from 'react';
import * as ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
try like this

Is there some way I can convert href tag to Link on React.js?

Thank you for opening this page in advance.
I am a self-taught coder. And now I am making my personal page with Bootstrap.
What I want to do now is; SPA feature of React.js. All I understand this feature is;
install "react-router-dom",
import { Link, NavLink } from "react-router-dom";
And replace those anchor and href tag to Link to=
The following code is in 'src' folder.
Navbar.js
import React from "react";
import logoImage from "../components/logo.png";
// React fontawesome imports
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
import { faBars } from "#fortawesome/free-solid-svg-icons";
import { Link, NavLink } from "react-router-dom";
const Navbar = () => {
return (
<nav className="navbar navbar-expand-lg navbar-light bg-white">
<div className="container-fluid">
<a className="navbar-brand mr-auto" href="#"><img className="logo" src={logoImage} alt="logoImage"/></a
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<FontAwesomeIcon icon={faBars} style={{ color: "#2ff1f2" }}/>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<a className="nav-link active" aria-current="page" href="../components/About">About me</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Thoughts</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Portfolio</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Contacts</a>
</li>
</ul>
</div>
</div>
</nav>
)
}
export default Navbar;
App.js
import './App.css';
import "bootstrap/dist/css/bootstrap.min.css";
import Button from "react-bootstrap/Button";
import Particles from "react-particles-js";
import Navbar from "./components/Navbar";
import Header from "./components/Header";
import About from "./components/About";
function App() {
return (
<>
<Particles
className="particles-canvas"
params={{
particles: {
number: {
value: 30,
density: {
enable: true,
value_area: 900
}},
shape: {
type: "star",
stroke: {
width: 6,
color: "#f9ab00"
}}}}}
/>
<Navbar />
<Header />
<About />
</>
);
}
export default App;
Header.js
import React from "react";
import Typed from "react-typed";
import { Link } from "react-router-dom";
const Header = () => {
return (
<div className="header-wraper">
<div className="main-info">
<h1>Welcome, this is my own personal page</h1>
<Typed
className="typed-text"
strings={["text message to display in the centre of the page"]}
typeSpeed={80}
/>
Details
</div>
</div>
)
}
export default Header;
And soon as I replace
<a className="nav-link" href="#">Thoughts</a>
to
<Link to="../components/About">Thoughts</Link>
It stops working with this following error message.
×
Error: Invariant failed: You should not use <Link> outside a <Router>
invariant
C:/Users/Administrator/my-portfolio/node_modules/tiny-invariant/dist/tiny-invariant.esm.js:10
(anonymous function)
C:/Users/Administrator/modules/Link.js:88
85 | return (
86 | <RouterContext.Consumer>
87 | {context => {
> 88 | invariant(context, "You should not use <Link> outside a <Router>");
| ^ 89 |
90 | const { history } = context;
91 |
My understanding to this error is:
I should make Router.js file in src folder.
I should just start again without Bootstrap first. Once SPA feature is done, then I can start work on this CSS feature as CSS in JS (e.g. const something = div.styled ``;)
I know this sounds ridiculous, but this is the best option I could think for now.
Question is, Where should I begin investigating this error message?
I am currently relying on this document page to remove the error message.
1st Example: Basic Routing - https://reactrouter.com/web/guides/quick-start
I would appreciate your opinion. Thank you.
If I found a solution, I will update it with mine here.

This is a good question, but, in order to answer it the best way, you will need to work with several files, as I'm sure you're already aware of.
To start, assuming you used create-react-app, go to the index.js file, and wrap everything from the first parameter with react-router-dom's BrowserRouter component. It should look like the following:
index.js
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<BrowserRouter>
<React.StrictMode>
<App />
</React.StrictMode>
</BrowserRouter>,
document.getElementById("root")
);
Next, you will want to use react-router-dom's Switch component to wrap all the application's routes.
App.js
import { Route, Switch } from "react-router";
import Navbar from "./components/Navbar";
import Header from "./components/Header";
import About from "./components/About";
// Particles component removed for explanation
function App() {
return (
<Navbar />
<Header />
// When a link is clicked, the component will appear within the following div,
// so if you want certain elements to stay where they are on the page, wrap
// and place the Switch component accordingly.
<div className='pages'>
<Switch>
<Route path='/about' component={About} />
<Route path='/profile' component={profile} />
<Route path='/thoughts' component={Thoughts} />
<Route path='/contacts' component={Contacts} />
</Switch>
</div>
);
}
export default App;
Now, within any child component of App, you can use react-router-dom Links (I personally prefer using NavLink due to its ease of styling). This could be done by the following:
Navbar.js
import { NavLink } from "react-router-dom";
const Navbar = (props) => {
return (
<nav className="navbar navbar-expand-lg navbar-light bg-white">
<div className="container-fluid">
<NavLink className="navbar-brand mr-auto" to='/home'>
<img className="logo" src={logoImage} alt="logoImage"/>
</NavLink
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<FontAwesomeIcon icon={faBars} style={{ color: "#2ff1f2" }}/>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<NavLink className="nav-link active" to='/about'>About me</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to='/thoughts'>Thoughts</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to='/portfolio'>Portfolio</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to='/contacts'>Contacts</NavLink>
</li>
</ul>
</div>
</div>
</nav>
)
};
export default Navbar;
After doing what is shown below, you will be able to navigate throughout your page using react-router-dom.

Router is a component provided by react-router-dom As the error says, Link can be used inside Router.
Also, path for Link should actual browser url and not the path of the component. Ideal way is to add routes for each component.
For Example your App can be like this: (Only for reference)
function App() {
return (
<Router>
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/">
<Navbar />
</Route>
</Switch>
</Router>
);
}

Yes, you can do that, this error happen since you are missing to wrap <Link> component via <Router>...
If you like to put it for all project, you can simply do this:
<Router>
<App />
</Router>
Example:
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
</nav>
{/* A <Switch> looks through its children <Route>s and
renders the first one that matches the current URL. */}
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>

Cache Image in react.js then image not appearing

I was planning to upload my React.js website into GitHub. then I enter npm cache clean --force into the terminal and then now all my image is in cache image. none of my images is loading up but the other information and animation are still working. how do I fix this problem? thanks
the images is under className='navbar-container container location.
import React, { useState, useEffect } from 'react'
import {Link} from 'react-router-dom'
import {FaBars, FaTimes} from 'react-icons/fa'
import { Button } from './Button'
import './Navbar.css'
import {IconContext} from 'react-icons/lib'
function Navbar() {
const [click,setClick]= useState(false);
const [button,setButton]= useState(true)
const handleClick = () => setClick(!click);
const closeMobileMenu = () => setClick(false)
const showButton = () => {
if (window.innerWidth <= 960){
setButton(false)
} else {
setButton(true)
}
};
useEffect(() => {
showButton();
}, []);
window.addEventListener('resize',showButton);
return (
<>
<IconContext.Provider value ={{color: "#fff"}}>
<nav className='navbar'>
<div className='navbar-container container'>
<Link to='/' className='navbar-logo' onClick={closeMobileMenu}>
<img src="/images/UOWMKDU-logb.png"
alt="UOWKDU Logo" width="35%" height="85%" className='navbar-icon' />
</Link>
<div className='menu-icon' onClick={handleClick}>
{click ? <FaTimes /> : <FaBars />}
</div>
<ul className={click ? 'nav-menu active' : 'nav-menu'}>
<li className='nav-item'>
<Link to='/' className='nav-links' onClick={closeMobileMenu}>
Home
</Link>
</li>
<li className='nav-item'>
<Link
to='/service'
className='nav-links'
onClick={closeMobileMenu}
>
Services
</Link>
</li>
<li className='nav-btn'>
{button ? (
<Link to='/sign-up' className='btn-link'>
<Button buttonStyle='btn--outline' >SIGN UP</Button>
</Link>
) : (
<Link to='/sign-up' className='btn-link' onClick={closeMobileMenu}>
<Button
buttonStyle='btn--outline'
buttonSize='btn--mobile'
>
SIGN UP
</Button>
</Link>
)}
</li>
</ul>
</div>
</nav>
</IconContext.Provider>
</>
)
}
export default Navbar

Fixed:
I recreate an new react.js folder and copy and paste the old one to the new one. because of packages.json have some issues. i think it might be some packages missing. but after make a new react.js file and copy and paste back. everything is fine

I am having trouble with my component applying the bootstrap NavBar and NavIcon classes

This is my first time using bootstrap with react and it is not applying the dimensions to my Navbar and Navbar Icon I installed dependencies and used className instead of class and still no affect.
import React, { Component } from "react";
import { Link } from "react-router-dom";
import logo from "../logo.svg";
import 'bootstrap/dist/css/bootstrap.min.css';
export default class Navbar extends Component {
render() {
return (
<nav className="navbar navbar-expand-sm bg-primary navbar-dark px-sm-5">
{/*
https://www.iconfinder.com/icons/1243689/call_phone_icon
Creative Commons (Attribution 3.0 Unported);
https://www.iconfinder.com/Makoto_msk */}
<Link to="/">
<img
src={logo}
alt="store"
className="navbar-brand"/>
</Link>
<ul className=" navbar-nav align-items-center">
<li className="nav-item ml-5">
<Link to="/" className="nav-link">
Products
</Link>
</li>
</ul>
</nav>
);
}
}
NavBar to be created and not huge logo and huge bar.

Are you sure, you have the bootstrap.css added in the document? Here is a working example of your same code https://codesandbox.io/s/0c9iz