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

```css
.fa-circle {
color: #f1f1f1;
}

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

```html
<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?