如何將顏色添加到透明區域的字體棒圖標

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

universal means no。我擔心你必須單獨處理每個圖標。

.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

你可以通過僞造字符，即:after來做到這一點。這可能幫助： https://jsfiddle.net/kr8axdc3/

Answer 3

在CSS中使用clip屬性像這樣.fa { clip: rect(0px,0px,0px,0px); }。設置爲適合的值。但我相信這個屬性只適用於圖像。

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>

Answer 5

試試這個，

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

Answer 6

你甚至可以做，使用如下僞選擇: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>