How to add color to transparent area of font awesome icons

Question

I want to change the transparent middle portion of fa-youtube-play icon to red. I try this code:

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

But sing this code will overlaps the icon. How do I make color to the inner transparent are only?

Answer 1

universal means no. I'm afraid you'll have to work with each icon individually.

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

Answer 2

You can do that by using psuedo character i.e. :after. This might help: https://jsfiddle.net/kr8axdc3/