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

【问题标题】：font awesome social media icon stack border字体真棒社交媒体图标堆栈边框
【发布时间】：2016-02-18 16:41:03
【问题描述】：

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

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

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

【问题讨论】：

为什么你的圆圈有单独的图标？为什么不直接使用社交媒体图标，然后添加一些 CSS：.icon-background2 {color: #fff; background:#000; display:block; border-radius:50%; text-align:center; width:50px; height:50px; line-height:50px;}

标签： html css

【解决方案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>

【讨论】：

不过，边框看起来很糟糕。
等等。我会想出一个解决办法:)
@PaulRedmond 编辑了代码。用 box-shadow 替换边框属性，我认为这会使图标更漂亮:)

【解决方案2】：

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

【讨论】：

【解决方案3】：

这对我来说看起来最好。

CSS

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

【讨论】：

我认为 Chris 早些时候可能是对的，还有许多其他方法可以实现圆形效果。但最后我主要使用了 Ajay 的代码，结果很好，谢谢！