html - Font Awesome 社交媒体图标堆栈边框

Question

我正在尝试为页面页脚构建一个足够简单的社交媒体链接，使用带有圆形背景的超棒字体图标，请用笔编码: http://codepen.io/anon/pen/ojmJYE

 <i class="fa fa-circle fa-stack-2x icon-background1" ></i>

对于翻转效果，我希望背景圆圈周围有一个“1px 黑色边框”，以便它从“实心”变为“轮廓”并保留图标 - 但我似乎无法引用圆圈背景的 CSS 边框属性？

Answer 1

非常简单。在 hover 状态下给 border !!

我已经给图标 border-radius: 50% 和 1px solid #000 border 以获得这个输出

.social-container {
  backgroun: #66ffdc;
  float: right;
  font-size: 1.2em
}
.icon-background1 {
  color: #000
}
.icon-background2 {
  color: #fff;
}
a:hover .icon-background1 {
  color: #fff;
  border-radius: 50%;
  box-shadow: 0px 0px 5px #000;
}
a:hover .icon-background2 {
  color: #000;
  border-radius: 50%;
  box-shadow: 0px 0px 5px #000;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="social-container">
  <a href="" class="fa-stack fa-lg" style="text-decoration:none; margin-top:0">
    <i class="fa fa-circle fa-stack-2x icon-background1"></i>
    <i class="fa  fa-facebook fa-stack-1x  icon-background2"></i>
  </a>
  <a href="" class="fa-stack fa-lg" style="text-decoration:none">
    <i class="fa fa-circle fa-stack-2x icon-background1"></i>
    <i class="fa fa-instagram fa-stack-1x  icon-background2"></i>
  </a>
</div>