Only stylize if the element belongs to a class

Question

Good afternoon, my friends! I wonder how I can get a Fontawesome icon to receive formatting ONLY if the HTML element belongs to the class status.

With different styles for 3 Fontawesome icons, with the same class 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>

Thank you in advance.

Answer 1

The dial should look like this:

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

It should not contain spacings, because then separated would be children, but united refer to the same element.

Answer 2

Just add the respective class and its style:

.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>