Make Font Awesome Icon Background Transparent

Question

Currently I am working on a sample solution using icons from Font Awesome's CDN.

For some reason my icons are displaying with a white background. I noticed this when applying the shadow effect from Bootstrap in my html.

Really what I would like to see here is simply the fingerprint icon foreground and a transparent background.

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

We have two kinds of shadows in CSS:

box-shadows

Shadows that work in block level (like the one you have used here)

text-shadow

Shadows that work in text level

it seems that bootstrap's shadow class only works in box level and you have to remove it and use custom CSS like this:

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

Answer 2

'box-shadow' will put the shadow on the 'i' surrounding the icon not the icon itself.

As Font Awesome is a SVG font you will need to be using '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>

Answer 3

Check this out.

Font Awesome is actually a font. So, we need to give the text-shadow. :)

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