如何添加颜色到字体真棒图标的透明区域

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>

但是唱这个代码会重叠图标.我如何才能使内部透明的颜色？

Answer 1

普遍意味着没有.我担心你必须单独使用每个图标.

.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>