SVG icon not rendered on pseudo-elements with Chrome

[soullivaneuh]

https://codesandbox.io/s/q99xylwvl4

Tested again Version 72.0.3626.121.

Works with Firefox.

[simon-hayden]

+1 to this issue. I am experienceing this with Chrome (73) and Firefox Quantum (66). Safari works fine.

I have the issue using the CDN or self-hosted approaches.

It seems like some of the unicode values (e.g. f107) don't match to their icons when used on psuedo-elements. However, some others do, and the same unicode pseudo-element might work in one place and not in another within the same page.

All the other CSS props (e.g. font-weight, font-style, font-variant, text-rendering, -webkit-font-smoothing) all present. I can't seem to identify a pattern as to when it does and doesn't render. Am slightly stumped. I thought it might be CORS, but it isn't.

Here is a pen to illustrate: https://codepen.io/rhecil-codes/pen/dLWaQx - The icons in this example render in Safari (12.1) but not Chrome (73) or Firefox Quantum (66).

[simon-hayden]

@soullivaneuh, I looked at your sandbox, and the issue you're having is that you're including the JS (SVG) version and then trying to use CSS psuedo-selectors. You have to use the Webfont version for that.

Try <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> and your psuedo selectors will work.

[soullivaneuh]

@simon-hayden I might agree with you, but how do you explain this is working with Firefox? Plus, I didn't see any warning about that on the documentation as far as I know. If it's true, an update would be welcomed. 👍

[CodelineRed]

@simon-hayden

Here is a pen to illustrate: https://codepen.io/rhecil-codes/pen/dLWaQx - The icons in this example render in Safari (12.1) but not Chrome (73) or Firefox Quantum (66).

Take a look at https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#define.
font-weight: 900; is missing in your codepen.

@soullivaneuh
FA SVG/JS doesn't load fonts to the frontend. This makes sense because they are not necessary if you just search for i-Tags and replace with svg-Tags.

[soullivaneuh]

@InsanityMeetsHH This does not explain why it's working under Firefox. :-)

BTW, I tried with the CSS one, it does not work on both Chrome and Firefox: https://codesandbox.io/s/4z963olp27

[soullivaneuh]

Forgot about the CSS example, I didn't put the font-weight.

The only not answered question is the working SVG example with Firefox.

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community.

@ soullivaneuh

SVG icon not rendered on pseudo-elements with Chrome

Sorry, cannot replicate

macOS 10.14.4, Chrome 73 / Firefox 66 / Safari 12.1

CSS: https://jsfiddle.net/tagliala/6rhmuj25/18/
SVG: https://jsfiddle.net/tagliala/we7gtcvk/29/

Please note that using pseudo elements with SVG is not recommended and requires extra configuration (data-search-pseudo-elements) and different style (display: none).

Docs:

• https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

The only not answered question is the working SVG example with Firefox.

Firefox and Chrome will fallback on the Font Awesome Free font installed on the system. Anyway, please do not report misconfigured test cases

@simon-hayden

https://codepen.io/rhecil-codes/pen/dLWaQx

f105 in regular style is not available in FA Free. (you are loading FA5 free from cloudflare)

Hope it helps

Closing here

If you still have issues, please fill out our bug report template and provide a well-configured test.case