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

Posted 2023-02-22

【中文标题】使字体真棒图标背景透明[重复]

【英文标题】：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 实际上是一种字体。

【参考方案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;