How can I add shadow to a fontawesome svg icons?

Question

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?

Answer 1

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>

Answer 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.