FontAwesome 5 - SVG&JS - pseudo elements

Question

Trying to use new Font Awesome 5 in SVG&JS combination in ::before element

Already tried to find solutions but it still not work correctly.

In head i got script activating the function and script.

<script>FontAwesomeConfig = { searchPseudoElements: true };</script>
<script src="fontawesome/js/all.js"></script>

CSS looks like this (also tried with or without font-weight 400/900, other font families and still found solution)

<style>
    .regular {
        padding: 20px;
    }

    .regular:before {
        content:'\f2bb';
        font-family: 'Font Awesome 5 Regular';
        width: 10px;
        height: 10px;
        font-weight: 900;
    }
</style>

After loading the page JS create SVG icon, but not delete the ::before element so i got black square and correct icon after it.

Someone find solution (except CDNs) how to use it corecctly?

check the second duplicate to see how to do with the JS version .. let me know if it still not working — Temani Afif, Jul 08 '18 at 19:49
Font family is ok..... Problem is with JS ( not deleting the pseudo element before ) (i want to use SVG not classical webfont way ) — Martin Pouzar, Jul 08 '18 at 20:03
yes check the second duplicate, I face the same issue ;) .. you need to hide it manually (or maybe there is another trick, but it's the one I found) — Temani Afif, Jul 08 '18 at 20:04
Yeah just checked it and its working. Rly weird solution but works. Thanks for help. — Martin Pouzar, Jul 08 '18 at 20:05
yes and am pretty sure there is something else to do ... but still didn't find for the new version — Temani Afif, Jul 08 '18 at 20:06

FontAwesome 5 - SVG&JS - pseudo elements

0 Answers0