如何给Font Awesome图标的透明区域添加颜色

Question

我想将 fa-youtube-play 图标的透明中间部分改为红色。我尝试了以下代码：

.fa {
  background-color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
  <i class="fa fa-youtube-play fa-3x" aria-hidden="true"></i>
</div>

但是使用这段代码会导致图标重叠。我该如何使内部透明区域仅为颜色？

- Vinod VT

---

也许只需要设置行高？jsfiddle - Huelfe

@Huelfe 优雅 - oldboy

您能否将背景颜色放在包含图标的 div 上，而不是图标本身上？ - Ortund

Answer 1

"universal" 意味着不行。恐怕您必须逐个处理每个图标。

.fa {
  background-image: radial-gradient(at center, red 40%, transparent 40%);
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
  <i class="fa fa-youtube-play fa-3x" aria-hidden="true"></i>
</div>

- Andrei Fedorov

Answer 2

您可以使用伪字符，即 :after 来实现。以下是相关示例： https://jsfiddle.net/kr8axdc3/

- Master.Deep

Answer 3

在CSS中使用clip属性，例如.fa { clip: rect(0px,0px,0px,0px); }。将其设置为适当的值。我相信这个属性只适用于图像。

- oldboy

Answer 4

正如您所看到的，有许多方法可以解决这个问题。最简单的方法是添加 line-height。

div .fa {
  background-color:red;
  line-height: 22px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
  <i class="fa fa-youtube-play fa-3x" aria-hidden="true"></i>
</div>

- Huelfe

Answer 5

你甚至可以使用伪选择器:before来实现，如下所示，这是一种有点冗长的样式，但可以为透明区域添加背景。

div {
  display: inline-block;
  position: relative;
}

div:before {
  content: "";
  position: absolute;
  background: red;
  width: 30px;
  height: 30px;
  z-index: -1;
  top: 10px;
  left: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
<div>
  <i class="fa fa-youtube-play fa-3x" aria-hidden="true"></i>
</div>

- frnt

Answer 6

try this one,

.fa{
       background-color:red;
       line-height:25px;
        width:40px;
    }

- Reshma