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>

You'll need to add shadow CSS as `text-shadow` as Font Awesome is actually a font. — Jan Henning, Jul 25 '18 at 04:41

score 4 · Answer 1 · answered Jul 25 '18 at 04:43

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

crffty · Answer 2 · 2018-07-25T21:00:00.533

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

score 0 · Answer 3 · answered Jul 25 '18 at 04:40

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>

Matthew · Accepted Answer · 2018-07-25T06:22:16.817

-1

I ended up creating a text-shadow class in css and used that in my HTML to generate the the shadow effect.

HTML UPDATE

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

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

edited Jul 25 '18 at 06:22

answered Jul 25 '18 at 05:53

Matthew

3,976
15
66
130

Make Font Awesome Icon Background Transparent

4 Answers4

box-shadows

text-shadow