Font Awesome Gradient in React-CodePudding

I am having issues with adding a gradient to a font awesome icon in react. I have looked at other similar questions and what I have seems to match but when I look at the dev tools it says the styles are being applied except there appears to be an issue with the transparency because if I turn it off, I see the gradient in the background.

This was done in typescript


const NavBar: React.FC<Props> = ({ darkTheme, setDarkTheme }: Props) => {
  // TODO: Refactor so dark theme hooks are in this component

  return (
    <header className="primary-header">
      <div className="logo">
        <NavLink className={({ isActive }) => (isActive ? "active" : "")} to="/">
          <FontAwesomeIcon icon={faHome} />
        </NavLink>
      </div>
    </header>

I have omitted the majority of the code but this is the section that isn't working.

.active,
.active > .fa-house {
  /* Start Gradient Text */
  background-color: var(--clr-grad-left);
  background-image: linear-gradient(
    90deg,
    var(--clr-grad-left) var(--grad-left-per),
    var(--clr-grad-right) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* End Gradient Text */
}

This css works with normal text but I do not know why this is not working for the font awesome icon.

CodePudding user response：

What version FontAwesome do you use? For 6.2.1 the React code should be <FontAwesomeIcon icon="fa-solid fa-house" />

Anyway...

In the below code it all seems to work fine. Maybe your --grad-left-per value is too high?

Also, with only two colors the parent element may just be too wide to show the gradient.

To check, disable background-image: var(--gradient) in the CSS.

:root {
     --gradient: linear-gradient(
                    90deg, 
                    aqua   , #00bcff, #007aff,
                    #0037ff, #0b00ff, #4e00ff,
                    #9000ff, #d300ff, #ff00e9,
                    #ff00a6, #ff0064, #ff0021,
                    #ff2100, #ff6400, #ffa600,
                    #ffe900, #d3ff00, #90ff00,
                    #4eff00, #0bff00, #00ff37,
                    #00ff7a, #00ffbc, aqua
                );

    --clr-grad-left : Crimson;
    --grad-left-per : 0%;
    --clr-grad-right: Blue;
}

.active { font-size: 4rem }

.active,
.active > .fa-house {
    /* Start Gradient Text */
    background-color: var(--clr-grad-left);

    background-image: linear-gradient(
    90deg,
    var(--clr-grad-left) var(--grad-left-per),
    var(--clr-grad-right) 100%
  );

    /* Works, enable to verify */
    background-image: var(--gradient); /**/

    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* End Gradient Text */
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet"/>

<div >
    <div>some text</div>
    <i ></i>
</div>

CodePudding user response：

Dont know anything about react but maybe this will help you out

Gradient for text goes like this:

.myclass.filler {
    background-image: linear-gradient(72.44deg, #FF7A00 11.92%, #FF0169 51.56%, #D300C5 85.69%);
}

.filler {
    -webkit-background-clip: text;
    background-repeat: no-repeat;
    color: transparent;
    display: inline;
}

<div ></div>

While gradient for FA Icons goes like this:

i.fa-thin.fa-check.fa-fw {
    background: -webkit-linear-gradient(32deg,#ff0000 20%,#4b8f94 50%,#ff981f 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

<i ></i>

Hope this helps

CodePudding user response：

I think because a font-awesome icon doesn't have text when rendered, then it does not support background properties like background-color or background-image.

you may use color instead of background-color or background-image and see if this fixes your issue.

.active > .fa-house {
  /* Start Gradient Text */
  color: linear-gradient(
    90deg,
    var(--clr-grad-left) var(--grad-left-per),
    var(--clr-grad-right) 100%
  );
  /* End Gradient Text */
}