Font-awesome: text-shadow not working (FontAwesome5)

[syuilo]

[syuilo]

Sorry, I learned that FontAwesome 5 inherits only size and color.

[tagliala]

You should use the webfont version of FA5 to keep using text-shadow

https://jsfiddle.net/tagliala/tgzouajm/4/

[chocos10]

@tagliala v5.0.6 text shadow is not working for the new release any updates on that .

[tagliala]

@chocos10 sorry, I cannot confirm

https://jsfiddle.net/tagliala/qq2eLxo1/8/

You should use the webfont version of FA5 to keep using text-shadow

[chocos10]

@tagliala should i open a issue ? or is there someone who can confirm this because i cannot use that ?

[tagliala]

@chocos10 feel free to open an issue but please make sure to fill out our bug report template

Also, if you are using the SVG Framework, text-shadow will not work and you should use the webfont version of FA5.

[charlygut]

Use css3 filter:drop-shadow() for SVG w/ JS

[aensley]

@charlygut That solution was just what I was looking for! I needed a way to ensure I could see a white "compress" icon no matter the background behind the element (dark or light). This worked:

.fa-compress {
    filter: drop-shadow(0 0 1px #777);
}

[charlygut]

@aensley this also works for Web Fonts

I post an example: https://codepen.io/charlygut/pen/vRWBdq

[chocos10]

Thanks for your help will look into Web Fonts :)

[arajay]

this does not work in IE

@charlygut That solution was just what I was looking for! I needed a way to ensure I could see a white "compress" icon no matter the background behind the element (dark or light). This worked:

.fa-compress {
    filter: drop-shadow(0 0 1px #777);
}

[charlygut]

@arajay you're right.
Look at this link and go to "browser support" https://www.w3schools.com/cssref/css3_pr_filter.asp

[aensley]

@arajay Here's a more comprehensive compatibility table: https://caniuse.com/#feat=css-filters