Question

我想将fa-youtube-play图标的透明中间部分更改为红色。我试试这段代码：

＆＃13;

.fa {
  background-color: red;
}

＆＃13;

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

＆＃13;

但是唱这个代码会重叠图标。如何才能使内部透明的颜色？

Answer 1

普遍意味着没有。我担心你必须单独使用每个图标。

＆＃13;

.fa {
  background-image: radial-gradient(at center, red 40%, transparent 40%);
}

＆＃13;

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

＆＃13;

Answer 2

您可以使用伪字符即PageViewControllerDataSource来完成此操作。这可能有所帮助： https://jsfiddle.net/kr8axdc3/

Answer 3

在CSS中使用clip属性，如.fa { clip: rect(0px,0px,0px,0px); }。设置为适当的任何值。我相信这个属性只适用于图像。

Answer 4

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

＆＃13;

div .fa {
  background-color:red;
  line-height: 22px;
}

＆＃13;

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

＆＃13;

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>

如何添加颜色到字体真棒图标的透明区域

6 个答案: