4

Estou usando o FontAwesome no React e para alterar a cor de um icone é necessário alterar a cor na classe do icone. Veja abaixo um exemplo:

.fa-drash{
    color: #ff0000;
}

A baixo segue a forma como está hoje, porém toda vez que incluo um novo icone na aplicação, tenho que atualizar a folha de estilo.

.fa-drash, fa-ed, .fa-adjust, .fa-acorn, .fa-alarm, .fa-amazon, .fa-apple, .fa-appter{
    color: #ff0000;
}

Meu pensamento seria melhorar isso inserindo apenas as iniciais da classe .fa-, como por exemplo abaixo, porém não funcionou comigo:

.fa-*{
     color: #ff0000;
}

É possível estilizar classes iniciadas com .fa-? Sim sim, como?

1
  • Eu não recomendo estilizar diretamente a classe "fa". Aconselharia você criar uma classe sua, por exemplo "my-icon" e estilizar ela com suas configurações "padrões". A medida do necessário, você apenas atribui essa nova classe aos ícones que você deseja que herde essas propriedades. 27/02/2019 às 12:34

3 Respostas 3

4

Concordo com o @Anderson, mas tem uma forma sim de pegar todas as classes que começam ou tenha dentro com determinado algum determinado nome ou caractere como por exemplo o "fa-"...

Resumidamente vc vai fazer a seleção pelo atributo class usando o operador * antes do =, assim toda class que tenha dentro do nome qualquer string que contenha "fa-" vai ser selecionada.

[attr*=value] Representa um elemento com um atributo de nome attr o qual valor contém ao menos uma ocorrência de value contido na string.

Fonte com a lista completa dos operadores ~ | ^ $ * e como cada um dele funciona: https://developer.mozilla.org/pt-BR/docs/Web/CSS/Seletor_de_atributos

[class*="fa-"] {
    color:red;
    font-size:30px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div>
  <i class="fab fa-stack-overflow"></i>
</div>

<p>
  <i class="fab fa-angellist"></i>
</p>


DICA:

Isso [href*="html"] é diferente disso [href*="HTML"]

O CSS é case sensitive e para evitar problemas com CamelCase ou Caixa Alta vc coloca no final do seletor a letra i

[attr operator value i]

Adiciona um i (ou I) antes do fechamento das chaves {}, faz com que o valor seja comparado sem levar em conta caixa alta ou caixa baixa(para caracteres dentro da faixa ASCII).

Aqui nessa pergunta tem uns detalhes sobre o assunto: Como fazer com que o CSS ignore se o atributo está com letra MAIÚSCULA ou minúscula?

2
  • Boa resposta Hugo. Vlw.
    – viana
    27/02/2019 às 16:50
  • @Viana Sem problemas meu caro. Esse técnica serve para qq atributo, vc pode pegar por exemplo todos IDs que tenha alguma palavra, ou todos elementos que tenha um [data-text] e por ai vai! []´s
    – hugocsl
    27/02/2019 às 16:52
2

Nao seria mas pratico se vc criar uma classe secudaria com a cor que vc quer? assim vc pode fazer reutilizar sem precisar refazer a css da fontawesome.

.fa-vermelho{
    color: #ff0000;
}
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet"/>
<i class="fas fa-igloo fa-vermelho"></i>

1

Mas por que precisa alterar a cor da fonte direto no ícone? Basta você alterar no contexto que o ícone se encontra.

body {
  font-size: 5rem;
}

div {
  color: green;
}

p {
  color: red;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div>
  <i class="fab fa-stack-overflow"></i>
</div>

<p>
  <i class="fab fa-stack-overflow"></i>
</p>

1
  • Obrigado Anderson pela sugestão e resposta, mas não responde exatamente a pergunta. Mas acho que daria para melhorar respondendo de fato o que eu perguntei e deixando sua resposta como incremento. Eu não encontrei em documentações de folha de estilo se isso é possível.
    – viana
    27/02/2019 às 12:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .