Question

我使用堆叠的字体图标来创建社交图标：

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

如何在悬停时同时更改圆圈图标和Facebook图标？

Answer 1

也可以使用过渡功能尝试以下代码。

.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

如果要在图标悬停时更改颜色。添加此代码。

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

CSS悬停2图标

3 个答案: