FontAwesome 6 Pro SVG Kit & CSS :before not working

[Mindless73]

When using a FontAwesome 6 Pro SVG Kit, Icons in :before don't seem to work.

li:before {
content: "\f054" !important;  
font-family: var(--fa-font-solid)  !important;  
}

It works, if I add the Web Font:

@font-face {
  font-family: "FontAwesome";
  src: url("/webfonts/fa-solid-900.woff2") format("woff2"),
  url("/webfonts/fa-solid-900.ttf") format("truetype"),
}

&:before {
  content: "\f054" !important;
  font-family: "FontAwesome" !important;
}

Is this a known limitation/problem? Or am I doing something wrong?

[Mindless73]

Never mind, I found the solution. I needed to add "data-search-pseudo-elements" to the script tag:
<script data-search-pseudo-elements src="https://kit.fontawesome.com/YourKitID.js" crossorigin="anonymous" defer></script>

[cvrocha]

You need to call the script in the head of the html