Font Awesome：如何使形状定界的背景颜色透明？

Question

假设我有这个字体很棒的图标：

<i class="fa fa-times-circle pull-right fa-2x" style="background-color: white; color: red;" aria-hidden="true"></i><

随着身体背景设置为黑色

body {  
  background-color: black;
}

我希望将形状划分为透明的背景（如同身体背景黑色，而圆圈内的内部背景保持白色），它实际上是否可能？

http://jsfiddle.net/8u39n0sq/

基本上如何避免方形的东西这个大的白色丑陋的方形，而形状中心的背景色是白色的？

Answer 1

您可以根据需要使用radial-gradient(white 50%, transparent 50%)并进行调整。希望这可以帮助 ：）

小提琴：http://jsfiddle.net/8u39n0sq/2/

body{
background:black;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

<i class="fa fa-times-circle pull-right fa-2x" style="background: radial-gradient(white 50%, transparent 50%); color: red;" aria-hidden="true"></i>

Answer 2

这是一个解决方法，但你可以考虑添加一个:after伪元素，以便在图标后面添加一个白色背景：

body {
  background-color: black !important;
}

i {
  color: red;
  position: relative;
}

i:after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  background: white;
  z-index: 0;
  border-radius: 100%;
}

i:before {
  z-index: 1;
  position: relative;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<i class="fa fa-times-circle pull-left fa-2x" ></i>

它基本上创建了一个白色圆形元素，并使用z-index将其排列在图标后面。我在4px，top，right和bottom属性中使用了left，以确保白色背景不会超出图标的边界。

Answer 3

background-color:transparent把它放在span上。

即<span class="fa-stack fa-lg icon-facebook" style="background-color:transparent">，如果你愿意，你可以把它放在课堂上。

我提供了working fiddle here。

Answer 4

我最终使用了几个fa-stack和我想要使用的内部形状。

<span class="fa-stack fa-lg success">
 <i class="fa fa-circle fa-stack-2x"></i>
 <i class="fa fa-check fa-stack-1x"></i>
</span>

<span class="fa-stack fa-lg error">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-times fa-stack-1x"></i>
</span>

虽然它违背了划定背景的目的：http://jsfiddle.net/cLpybq20/

与我使用的字形不完全相同，但它符合我的需要并且显示出较少的调整。