html - 如何为 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>

但是唱这段代码会重叠图标。我如何使颜色到内部透明是唯一的？

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>