how to change font awesome icon color - reactjs

Question

Please help me I am new at web development, how do I change the font awesome icon color?
In my Navbar.js
import { Component } from "react";
import "../Css/Elements/Navbar.css";
class Navbar extends Component {
state = { clicked: false };
handleClick = () => {
this.setState({ clicked: !this.state.clicked });
};
render() {
return (
<>
<nav>
<a id="navlogo" href="/">Blank</a>
<div>
<ul
id="navbar"
className={this.state.clicked ? "#navbar active" : "#navbar"}
>
<li>
<a href="/">
Home
</a>
</li>
<li>
Shop
</li>
<li>
Blog
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</div>
<div id="mobile" onClick={this.handleClick}>
<i
id="bar"
className={this.state.clicked ? "fas fa-times" : "fas fa-bars"}
></i>
</div>
</nav>
</>
);
}
}
export default Navbar;
Css (i put this here just in case)
/* Nav */
nav {
font-family: sans-serif;
display: flex;
position: fixed;
align-items: center;
justify-content: space-between;
background: #F1F5F9;
width: 100%;
padding: 20px 23px;
z-index: 100;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
}
a {
text-decoration: none;
}
#navlogo {
font-weight: 700;
font-size: 25px;
color: #1D3053;
text-transform: uppercase;
transition: all 0.2s ease;
}
#navlogo:hover {
color: #319afc;
}
#navbar {
display: flex;
align-items: center;
justify-content: center;
}
#navbar li {
list-style: none;
padding: 0 20px;
position: relative;
}
#navbar li a {
text-decoration: none;
font-size: 15px;
font-weight: 700 !important;
color: #1D3053;
text-transform: uppercase;
transition: 0.2s ease-in-out;
}
#navbar li a:hover {
color: #319afc;
}
#navbar li a:hover::after {
content: "";
width: 30%;
height: 2px;
background: #319afc;
position: absolute;
bottom: -4px;
left: 20px;
}
#mobile {
display: none;
}
#mobile i {
color: #ffff;
align-items: center;
}
#media screen and (max-width: 769px) {
#navbar {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
position: fixed;
top: 69px;
right: -100%;
width: 270px;
height: 100%;
background: #ffff;
box-shadow: 0 40px 60px rgba(0, 0, 0, 0.1);
padding: 40px 0 0 10px;
z-index: 100;
transition: 0.3s ease-in-out;
}
#navbar.active {
right: 0px;
}
#navbar li {
margin-bottom: 25px;
z-index: 100;
}
#mobile {
display: block;
}
#mobile i {
font-size: 24px;
cursor: pointer;
}
}
how do I change the "fa-bars" and the "fa-times" icon color my website theme is white and the icon is white too, so its hard to see the icon
Sorry for the bad English :)

Answer 1

You can add style={{color: "<color-name>"}} like this:
<i id="bar"
className={this.state.clicked ? "fas fa-times" : "fas fa-bars"}
style={{color: "red"}}>
</i>

Answer 2

The color of icon is controlled either by itself.
#mobile i {
color: red;
align-items: center;
}
I believe fontawesome also allow you to define color from its parent, because by default it also has this line built-in depending on the UI library you are using.
i {
color: inherit;
}