how to change font awesome icon color

Viewed 13

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>
                                        <a href="/">Shop</a>
                                   </li>
                                   <li>
                                        <a href="/">Blog</a>
                                   </li>
                                   <li>
                                        <a href="/">About</a>
                                   </li>
                                   <li>
                                        <a href="/">Contact</a>
                                   </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 :)

2 Answers

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>

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;
  }
Related