Html 如何为字体图标的透明区域添加颜色

我想将youtube播放图标的透明中间部分更改为红色。我尝试以下代码：

.fa{
背景色：红色；
}

---

您可以使用psuedo字符，即

：after

。这可能有助于：

---

在CSS中使用

clip

属性，如so

.fa{clip:rect（0px，0px，0px，0px）；}

。设置为任何合适的值。但是，我相信此属性仅适用于图像。

通用表示否。恐怕您必须单独处理每个图标

.fa{
背景图像：径向梯度（中心，红色40%，透明40%）；
}

---

正如您所见，有很多方法可以做到这一点。解决此问题的最简单方法是添加

行高

div.fa{
背景色：红色；
线高：22px；
}

试试这个

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

---

您甚至可以使用伪选择器

：在如下所示的
之前，使用稍微冗长的样式，但会为透明区域添加背景


div{
显示：内联块；
位置：相对位置；
}
部门：以前{
内容：“；
位置：绝对位置；
背景：红色；
宽度：30px；
高度：30px；
z指数：-1；
顶部：10px；
左：10px；
}

也许只需给出一个线条高度@Huelfe Elegant能否将背景色放在包含图标的div上，而不是图标本身？