CODEWITHSUNDEEP
htmlcsscolorsiconsfont-awesome
Vinod VT
Vinod VT

Reputation: 7159

How to add color to transparent area of font awesome icons

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?

Upvotes: 5

Views: 6842

Answers (6)

frnt
frnt

Reputation: 8795

You could even do that using pseudo selector :before as below, bit lengthy styling but adds background to that transparent area. 

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>

Upvotes: 1

Reshma
Reshma

Reputation: 446

try this one,

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

Upvotes: 1

Huelfe
Huelfe

Reputation: 1836

As you can see there are many ways to do it. The easiest way to fix this is to add 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>

Upvotes: 1

Andrei Fedorov
Andrei Fedorov

Reputation: 3987

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>

Upvotes: 12

oldboy
oldboy

Reputation: 5954

In CSS use the clip property like so .fa { clip: rect(0px,0px,0px,0px); }. Set to whatever values are appropriate. I believe this property only applies to images, however.

Upvotes: 1

Master.Deep
Master.Deep

Reputation: 812

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

Upvotes: 2

Related Questions