3

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.

user3174311
  • 1,714
  • 5
  • 28
  • 66
  • 2
    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 Oct 30 '19 at 15:49
  • sorry I was actually applying the css to the outer div not the icon itself. thank you. – user3174311 Oct 30 '19 at 15:58

1 Answers1

0

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>
);
blueseal
  • 2,726
  • 6
  • 26
  • 41