CSS hover 2 icons

Question

I'm using fontawesome icons stacked to create a social icon:

.fa-circle {
color: #f1f1f1;
}

.fab-facebook-f {
color: blue;
}

<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>

<a class="author-box-social-icon" href="" target="_blank">
  <span class="fa-stack fa-lg">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fab fa-facebook-f fa-stack-1x"></i>
  </span>
</a>

how do I go about changing the circle icon and the facebook icon at the same time on hover?

Answer 1

Try following code also using transition.

.fa-circle {
  color: #f1f1f1;
}
.fab-facebook-f {
  color: blue;
}
.author-box-social-icon i {
  transition: .3s ease-in-out;
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -ms-transition: .2s ease-in-out;  
}
.author-box-social-icon:hover .fa-circle {
  color: blue;
}
.author-box-social-icon:hover .fa-facebook-f {
  color: #f1f1f1;
}

<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>
<a class="author-box-social-icon" href="" target="_blank">
  <span class="fa-stack fa-lg">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fab fa-facebook-f fa-stack-1x"></i>
  </span>
</a>

Answer 2

if you want to change the color on hover of the icon. add this code.

.fa-circle {
color: #f1f1f1;
}

.fab-facebook-f {
color: blue;
}


.author-box-social-icon:hover .fa-circle{color:#444;}
  .author-box-social-icon:hover .fa-facebook-f{color:#fff;}

<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>

<a class="author-box-social-icon" href="" target="_blank">
  <span class="fa-stack fa-lg">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fab fa-facebook-f fa-stack-1x"></i>
  </span>
</a>

Answer 3

.fa-circle {
color: #f1f1f1;
}
.fab-facebook-f {
color: blue;
}
.author-box-social-icon:hover .fa-circle {
  color: #64908A;
}
.author-box-social-icon:hover .fa-facebook-f {
  color: #f00;  
}

<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>

<a class="author-box-social-icon" href="" target="_blank">
  <span class="fa-stack fa-lg">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fab fa-facebook-f fa-stack-1x"></i>
  </span>
</a>