使字体真棒图标背景透明[重复]答案

【问题标题】：Make Font Awesome Icon Background Transparent [duplicate]使字体真棒图标背景透明[重复]
【发布时间】：2019-01-01 19:08:48
【问题描述】：

目前我正在使用来自Font Awesome's CDN 的图标开发示例解决方案。

由于某种原因，我的图标以白色背景显示。在我的html 中应用Bootstrap 的shadow 效果时，我注意到了这一点。

我真正想在这里看到的只是指纹图标前景和透明背景。

HTML

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

【问题讨论】：

你能分享你的CSS吗
然后删除'shadow'类
您需要将阴影 CSS 添加为 text-shadow，因为 Font Awesome 实际上是一种字体。

标签： html twitter-bootstrap bootstrap-4 font-awesome

【解决方案1】：

看看这个。

Font Awesome 实际上是一种字体。所以，我们需要给文本阴影。 :)

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

【讨论】：

【解决方案2】：

'box-shadow' 会将阴影放在图标周围的 'i' 上，而不是图标本身。

由于 Font Awesome 是一种 SVG 字体，您需要使用“text-shadow”。

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

【讨论】：

【解决方案3】：

我们在 CSS 中有两种阴影：

盒子阴影

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

文字阴影

适用于文本级别的阴影

似乎 bootstrap 的 shadow 类仅适用于盒子级别，您必须将其删除并使用自定义 CSS，如下所示：

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

【讨论】：

【解决方案4】：

我最终在 css 中创建了一个 text-shadow 类，并在我的 HTML 中使用它来生成阴影效果。

HTML 更新

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

CSS 更新

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

【讨论】：