How to make react FontAwesomeIcon not to change color on mouse hover

3
votes

I have a page with black background where I placed a white icon like that using React FontAwesome

<Link to={'/'} className={classes.homeButtonLink}>
  <FontAwesomeIcon icon={faHome} size="2x"/>
</Link>

on mouse over the icon become black and I cant see it. How can I make the icon not to change color? I already tried applying css to icon and link, no luck.

1
javascriptcssreactjsfont-awesome-5react-font-awesome
What did you try with css? Basicly a .icoClass:hover{ color: #000;} would do the job! Where you replace icoClass with the class of the icon – Merijndk
sorry I was actually applying the css to the outer div not the icon itself. thank you. – user3174311

1 Answers

0
votes

I have tried this code. FontAwesome Icon doesn't change color upon mouse hover. It only changes color on mouse click. could you just reproduce your behaviour with the given code ?

import { BrowserRouter, Link } from "react-router-dom";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHome } from "@fortawesome/free-solid-svg-icons";

import "./styles.css";

const element = (
  <BrowserRouter>
    <Link to={"/"}>
      <FontAwesomeIcon icon={faHome} size="6x" />
    </Link>
  </BrowserRouter>
);