3

Boa tarde amigos! Gostaria de saber como posso fazer com que um icone do FontAwesome receba a formatação APENAS se o elemento do HTML pertencer à classe status.

Com estilos diferentes para 3 icones do FontAwesome, com a mesma classe social

Ex:

<!-- O caso abaixo não é afetado pelo CSS, pois não tem o "social" dentro do class -->
<i class="fa fa-home"></i>

<!-- Já este outro caso será afetado pelo CSS, pois possui o "social" dentro do class -->
<i class="fa fa-home social"></i>
<i class="fa fa-book social"></i>
<i class="fa fa-pencil social"></i>

Agradeço desde já.

2 Respostas 2

5

O seletor deve ficar assim:

.status.fa {
    /*coloque o estilo aqui*/
}

Não deve conter espaçamentos, pois assim separados seriam filhos, mas unidos se referem ao mesmo elemento.

3
  • 1
    Provavelmente, era esse o problema que eu tinha, eu separei os dois com um espaço. Eu não tenho conhecimento em CSS, então pensei que botar com ou sem espaço não fazia diferença. Obrigado por esclarecer.
    – Brunno
    11/09/2017 às 21:34
  • @Brunno testa e me avisa. 11/09/2017 às 21:34
  • 1
    Funcionou. Só tô esperando dar o tempo pra setar como melhor resposta.
    – Brunno
    11/09/2017 às 21:40
2

Basta adicionar a classe respectiva e seu estilo:

.fa-book.status{
    color:tomato;
}
    
.fa-home.status{
    color:green;
}
    
.fa-pencil{
    color:blue;
}
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

     <i class="fa fa-home"></i>
        
     <i class="fa fa-book  status"></i>
     
     <i class="fa fa-pencil status"></i>
     
     <i class="fa fa-home status"></i>
 

2
  • O problema é que eu tô criando um estilo diferente para 3 icones do FontAwesome, ai não adianta ter só o estilo do .status, porque eu quero que tenha diferença entre o estilo de fa-home e fa-coffee, por exemplo.
    – Brunno
    11/09/2017 às 21:32
  • @Brunno. Alterei minha resposta. você deve elaborar seu seletor como "para icone tal com classe status" quero aplicar tal css.
    – BillRizer
    11/09/2017 às 21:39

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 .