代码之家 › 专栏 › 技术社区 › Matthew

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

font-awesome bootstrap-4 twitter-bootstrap html5 html

-1

Matthew · 技术社区 · 6 年前

这个问题已经有了答案:

how to style icon color,size,and shadow of font awesome icons 21答

目前,我正在使用 FONT Awesome的cdn结合使用.>

出于某种原因,我的图标以白色背景显示。我在应用 shadow effect from bootstrap in my html时注意到了这一点。


   
    
     
      
      
      
       
      
     
     
      我真的想在这里看到的只是指纹图标前景和透明背景。
     
     
     
     <div class=“row text center”>
<DIV class=“col”>
和DIV & GT;
和跨度;
<i class=“fas fa fingerprint fa-5x shadow”></i>
L//Stand & Gt;
&L/DIV & GT;
&L/DIV & GT;
&L/DIV & GT;
< /代码> <

21答




目前我正在使用来自Font Awesome's CDN.


出于某种原因,我的图标以白色背景显示。我在应用shadow效果从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>

4 回复 | 直到 6 年前

Mahdi Aryayi 6 年前

我们在CSS中有两种阴影:

箱形阴影

在块级别工作的阴影(类似于您在此处使用的阴影)

文本阴影

在文本级别工作的阴影

似乎是引导程序的 shadow 类只能在Box级别下工作,您必须删除它并使用如下自定义CSS:

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

crffty 6 年前

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

因为字体Awesome是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>

Eugine Joseph 6 年前

看看这个。

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

-1

Matthew 6 年前

我最终创造了一个 text-shadow 在CSS中初始化,并在我的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;
}