TL;DR
Use CSS filter: drop-shadow(...).
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>