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/

如何设计圆形字体字体真棒图标背景？

3 个答案: