使字体图标背景透明[重复]

Question

目前，我正在使用FontAwesome的CDN中的图标开发一个示例解决方案。

出于某种原因，我的图标显示为白色背景。我注意到这一点，当应用阴影效果从Bootstrap在我的html。

实际上，我想在这里看到的只是指纹图标的前景和透明背景。

HTML

<div class="row text-center">
    <div class="col ">
        <div>
              <span>
                  <i class="fas fa-fingerprint fa-5x shadow "></i>
              </span>
        </div>
    </div>
</div>

Answer 1

看看这个。

字体真棒实际上是一种字体。所以，我们需要给文本阴影。：）

css prettyprint-override">.fas { 
  color: orange; 
  text-shadow: 1px 1px #333 
}

<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"/>
<div class="row text-center">
  <div class="col ">
    <div>
      <span><i class="fas fa-fingerprint fa-5x shadow" ></i></span>
    </div>
  </div>
</div>

Answer 2

“框阴影”将阴影放置在图标周围的“i”上，而不是图标本身。

由于字体真棒是一种SVG字体，你需要使用“文本阴影”。

.shadow {
  text-shadow: 2px 2px #20202088;
}

.fa-fingerprint {
  color: #25b8f0;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

<div class="row text-center">
    <div class="col ">
        <div>
              <span>
                  <i class="fas fa-fingerprint fa-5x shadow "></i>
              </span>
        </div>
    </div>
</div>

Answer 3

CSS中有两种阴影：

在方块级别工作的阴影（就像你在这里使用的阴影）

在文本级别工作的阴影

似乎引导程序的阴影类只在box级别工作，您必须删除它并像这样使用自定义CSS：

span i {
  text-shadow: 2px 2px #000000;
}