Градиентный шрифт потрясающий в реакции - PullRequest
Новая
       25

Градиентный шрифт потрясающий в реакции

0 голосов
/ 12 декабря 2018

Добавление цвета градиента в шрифт. В общем, значок выглядит просто, просто примените следующий код: 

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

Но по какой-то причине я не могу этого сделать в React.мой jsx: 

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

И 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;

Градиент не применяется.если я использую! важное: 

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

Это относится к фону, но я не могу добавить! важное для webkit-background-clip и webkit-text-fill-color

Также,попытка выбрать элемент psuedo .audio-icon :: before ничего не делает.

Есть идеи?

Заранее спасибо

1 Ответ

0 голосов
/ 13 декабря 2018

Я не уверен, является ли это проблемой со шрифтом aswesome npm для реакции, но в любом случае обходной путь заключается в том, чтобы просто сделать это по-старому: 1. Добавить ссылку cdn в index.html 2. использовать обычный синтаксис html: 

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

Если кто-то знает, как применить его с пакетом npm для React, я был бы признателен за это

Спасибо

...