Adição do efeito do arco-íris e Fontawesome nos títulos dos tópicos

Detalhes da questão

Endereço do fórum: https://naointeressa.forumeiros.com/
Versão do fórum: ModernBB

Descrição

Saudações,

novamente estou tendo problema nas legendas de títulos em arco-íris, não está do jeito que eu almejava ser. Queria que fosse da seguinte forma: https://prnt.sc/11444rk . Mas está assim: https://prnt.sc/11445qb . Como faço para deixar o tópico que eu quiser brilhoso e com a imagenzinha ao lado? Desde já, irei ficar no aguardo. Pff

Obs¹: Já tentei o CSS:

Código:

a[href^="/t"] > span[style^="color:#f7ffcc;"],
.rainbow {
    background: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    animation: rainbow 4s ease-in-out infinite
    background-size: 400% 100%;
}

Porém, sem sucesso nenhum.

Mude o seu código do CSS para esse:

Código:

a[href^="/t"] > span[style^="color:#f7ffcc;"],
.rainbow {
    background: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    animation: rainbow 4s ease-in-out infinite;
    background-size: 400% 100%;
}
@keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}

vcapelli escreveu:Mude o seu código do CSS para esse:

Código:

a[href^="/t"] > span[style^="color:#f7ffcc;"],
.rainbow {
    background: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    animation: rainbow 4s ease-in-out infinite;
    background-size: 400% 100%;
}
@keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}

Foi, porém com bugs. ;/ 

Testei o código no seu fórum e funcionou pode informar qual o bug?

Spoiler:

vcapelli escreveu:Testei o código no seu fórum e funcionou pode informar qual o bug?

Spoiler:

Boa noite. Eu queria que tivesse com a imagenzinha ao lado, como consta no primeiro print. È possível? Desde já, obg, e no aguardo

Só adicionar:

Código:

a[href^="/t"] > span[style^="color:#f7ffcc;"]:before {
  font-family: "Font Awesome 5 Free";
  content: '\f51c';
  margin-right: 3px;
  font-weight: 1000;
}

Funcionou!!  Obrigado pela sua ajuda, amigo!!.