字体真棒社交媒体图标堆栈边框

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> 

Answer 2

这似乎对我来说最好。

CSS

a:hover .icon-background1  {
  color: #fff;
  border: 2px solid #000;
  border-radius: 50%;
  transform: scale(0.80);
  box-sizing: border-box;
}

Answer 3

 .social-container { width: 100%; margin: 40px 0 50px; list-style-type: none; text-align: left; padding: 0; float: left; text-align: center;} .social-container li i { width: 42px; height: 42px; display: block; border: 1px solid #aaa9ad; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; line-height: 42px; color: #aaa9ad; font-size: 21px; } .icon-background1 {color: #000 } .icon-background2 {color: #fff;} a:hover .icon-background1 {color: #fff} a:hover .icon-background2 {color: #000;} 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <ul class="social-container"> <li><a href="#"><i class="fa fa-facebook"></i></a></li> </ul>