如何给 Fontawesome 图标背景添加样式？

Question

有没有一种简单的方法来正确地样式化Fontawesome图标的背景？我试图使用icon-remove-sign（它有一个圆形的特点）图标，以使红色的圆形和白色的叉号出现。

困难在于该图标被识别为正方形，因此我尝试将其变成圆形以应用红色背景颜色（但我想知道是否有更简单的方法）。

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

但这还不够，我们可以看到图标顶部有红色背景。你会怎么做？

- Ludo

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>

- Xus

Answer 2

这感觉有点粗糙，但我设法在这里使它工作：

http://jsfiddle.net/3FvxA/

display:block 并给它一个高度和宽度似乎是关键。

- Tim Wasson

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/

- ZazOufUmI