39

I'm using SVG Font Awesome icons in a simple HTML doc, and I want add shadows to them. So I tried doing...

<div style="text-shadow: 2px 2px 5px #000">
    <i class="fa fa-search-plus"></i>
</div>

...but it doesn't work.

So, what is the correct way to do that?

Jakub Muda
  • 6,008
  • 10
  • 37
  • 56
oramoetaro
  • 543
  • 1
  • 6
  • 9

3 Answers3

67

TL;DR

Use CSS filter: drop-shadow(...).

DOCUMENTATION

The reason text-shadow property does not work is that Font Awesome is not text when you use svg version loaded by javascript. I tried loading it using css and it works.

Font Awesome loaded with CSS:

.fa-globe{text-shadow:3px 6px rgba(255,165,0,.75)}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">

<i class="fas fa-10x fa-globe"></i>

This will not work. Text-shadow has no effect and box-shadow makes a shadow around a square.

.fa-globe{text-shadow:1px 6px rgba(255,0,0,.5)}

.fa-globe{box-shadow:0 .5rem 1rem 0 rgba(255,0,0,.5),0 .375rem 1.25rem 0 rgba(255, 165,0,.19)}
<script defer src="https://use.fontawesome.com/releases/v5.7.0/js/all.js"></script>

<i class="fas fa-10x fa-globe"></i>

EDIT

You can add filter:drop-shadow property and it will create a shadow around svg icons.

DOCS: https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow

.fa-globe{filter:drop-shadow(20px 10px 1px red)}
<script defer src="https://use.fontawesome.com/releases/v5.7.0/js/all.js"></script>

<i class="fas fa-10x fa-globe"></i>
Jakub Muda
  • 6,008
  • 10
  • 37
  • 56
2

For the case that OP has, it is inserting the icon with html, so the filter option did not work for me, what did the trick was the following:

.icon-container i {
    text-shadow: 0 0 10px #000, 0 0 20px #000, 0 0 30px #000;
}

I separated it with commas so as to add some other shadows to give a strong color close to the core of the icon and a more blured one the farther from it.

Pepe Alvarez
  • 1,218
  • 1
  • 9
  • 15
0

i know this post is old but found an elegant solution to this. fontawesome has javascript that inlines the styles to the main dom's head element. you can disable this, and also inline the css to your shadow dom:

import { config, dom } from '@fortawesome/fontawesome-svg-core'

config.autoAddCss = false

<style>{dom.css()}</style>

TakaGoto
  • 362
  • 4
  • 17