css - 如何风格化圆形 Fontawesome 图标背景？

Question

有没有一种简单的方法来Fontawesome正确设置图标背景的样式？我试图用icon-remove-sign（它的特殊性是一个圆圈）图标来做到这一点，以使白色的十字和红色的圆圈出现。

困难在于该图标被识别为正方形，因此我试图将其设为圆形以应用红色background color（但我想知道是否没有更简单的东西）：

.icon-remove-sign {
    padding: 0;
    border-radius: 25px;
    color: white;
    background-color: red;
}

但这还不够，我们可以看到图标顶部的红色背景。

你会怎么做？

Answer 1

使用 fontawesome，您可以使用这样的堆叠图标：

<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>

Answer 2

感觉有点hacky，但我设法让它在这里工作：

http://jsfiddle.net/3FvxA/

display:block给它一个高度和宽度似乎是秘密。

Answer 3

假设您的 HTML 如下所示：

<div class="social-circle">
  <a class="fa fa-facebook" href="#"></a>
  <a class="fa fa-twitter" href="#"></a>
  <a class="fa fa-pinterest-p" href="#"></a>
</div>

您可以执行以下操作：

.social-circle [class*="fa fa-"] {
  width: 25px;
  height: 25px;
  color: white;
  background-color: grey;
  border-radius: 25px;
  display: inline-block;
  line-height: 25px;
  margin: auto 3px;
  font-size: 15px;
  text-align: center;
}
.fa-facebook:hover { 
    background-color: #3B5A9B; 
}
.fa-twitter:hover { 
    background-color: #4FC6F8; 
}
.fa-pinterest-p:hover { 
    background-color: #CA2128; 
}

请参阅此处的示例：http: //jsfiddle.net/k69xj2n8/