CODEWITHSUNDEEP
htmlcssreactjsfrontend
tabrez
tabrez

Reputation: 146

How to make React <FontAwesomeIcon/> color changed on button hover?

I am pretty much new to React and cannot solve this issue. Basically, I want to change only the color of the "FontAwesomIcon" tag while hovering the button but not the color of the text inside the "span" tag. I am using react-bootstrap as well. Here is my code,

<div class="tab">
   <Link to="/dataset-upload">
      <button class="tablinks" onClick={this.handleClick}>
            <FontAwesomeIcon icon={faCloudUploadAlt} size="lg"/> 
            <span>Dataset Upload</span>
      </button>
  </Link>
</div>

here is the CSS for FontAwesomeIcon,

.tab button FontAwesomeIcon:hover{
    color: #86BC25;
}

If I replace FontAwesomeIcon with span in the CSS it works.

I would appreciate any suggestion or piece of advice.

Upvotes: 7

Views: 11442

Answers (4)

Raksha Jaiswal
Raksha Jaiswal

Reputation: 1

//as component, take value as prop, if we pass color as prop, then its value will be immutable

<FaTimesCircle className="fa-icon" />


//css file

.fa-icon{color: blueviolet;}

.fa-icon:hover {color: rgb(255, 72, 72);}

Upvotes: -1

keikai
keikai

Reputation: 15146

Since CSS can do a lot, I do not double that.

But, if you want to write pure JSX without styled-components or something.

You can make the button mouseOver event fully controlled:

import React, { useState } from "react";
import "./styles.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCloudUploadAlt } from "@fortawesome/free-solid-svg-icons";

export default function App() {
  const [over, setOver] = useState(false);
  return (
    <div className="App">
      <button
        onMouseOver={() => setOver(true)}
        onMouseLeave={() => setOver(false)}
      >
        <FontAwesomeIcon
          icon={faCloudUploadAlt}
          size="lg"
          style={over ? { color: "red" } : {}}
        />
        <span>Dataset Upload</span>
      </button>
    </div>
  );
}

enter image description here

Upvotes: 8

Maniraj Murugan
Maniraj Murugan

Reputation: 9084

Using CSS you can achieve the result,

HTML: Add a className say like upload-icon to the parent div and className say like font-upload to the FontAwesomeIcon.

<div className="tab upload-icon">
 <Link to="/dataset-upload">
   <button className="tablinks" onClick={this.handleClick}>
   <FontAwesomeIcon
     icon={faCloudUploadAlt}
     size="lg"
     className="font-upload"
      />
    <span>Dataset Upload</span>
    </button>
  </Link>
</div>

CSS: Upon hovering over parent div upload-icon, change color of font-upload like,

.upload-icon:hover .font-upload {
  color: green;
}

Working sandbox

Note: Please consider using className instead of class.. Ref Link

Upvotes: 6

johannchopin
johannchopin

Reputation: 14844

You can use the className property on a FontAwesomeIcon component.

So just write a css rule:

.tablinks:hover .fa-icon {
  color: red;
}

and then give this class to the component:

<FontAwesomeIcon icon={faCloudUploadAlt} size="lg" className="fa-icon" />

Upvotes: 8

Related Questions