Gradient font awesome IN REACT

Question

Adding gradient color to font awesome icon seems easy generally, just apply the following css:

background: -webkit-linear-gradient(#9c47fc, #356ad2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

But for some reason I cannot make it happen in React. my jsx is:

<FontAwesomeIcon className="audio-icon" icon="step-backward" />

And the css:

.audio-icon {
  font-size: 20rem;
  text-align: center;
  position: absolute;
  background: -webkit-linear-gradient(#9c47fc, #356ad2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

The gradient doesn't apply. if I use !important:

background: -webkit-linear-gradient(#9c47fc, #356ad2) !important;

It applies to the background, but I cannot add !important to the webkit-background-clip and webkit-text-fill-color

Also, trying to to select the psuedo element .audio-icon::before doesn't do anything.

Any ideas?

Thanks in advance

I meant you no more need the webkit with gradient, you can use the above one and you should have the same result (either if it works or not) — Temani Afif

sir-haver sir-haver · Accepted Answer · 2018-12-12T21:11:25

I'm not sure whether it's a problem with font aswesome npm for react, but anyhow the work around is to just do it the old way: 1. Add the cdn link to index.html 2. use the normal html syntax:

<i className="fas fa-step-backward audio-icon"></i>

If someone happens to know how to apply it with the npm package for React I would appreciate it

Thanks

Gradient font awesome IN REACT

2 Answers