Font Awesome einbinden funtkioniert nicht

Shopware 6 (German) Themes & Design
1

Hallo zusammen,

da Font Awesome nach einem Theme-Update nicht mehr als Webfont bereitgestellt wird, versuche ich nun verzweifelt, eben diese Webfonts-Dateien einzubinden.

Ich habe die Schriftarten in public/fonts hochgeladen und per CSS eingebunden:

@font-face {
    font-family:"Font Awesome 6 Brands";
    font-display:block;
    font-weight:400;
    src:url(https://sw6.stalltechnik24.de/fonts/fa-brands-400.woff2) format("woff2"),
    url(https://sw6.stalltechnik24.de/fonts/fa-brands-400.ttf) format("truetype")
}

@font-face {
    font-family:"Font Awesome 6 Free";
    font-display:block;
    font-weight:900;
    src:url(https://sw6.stalltechnik24.de/fonts/fa-solid-900.woff2) format("woff2"),
    url(https://sw6.stalltechnik24.de/fonts/fa-solid-900.ttf) format("truetype")
}

@font-face {
    font-family:"Font Awesome 6 Free";
    font-display:block;
    font-weight:400;
    src:url(https://sw6.stalltechnik24.de/fonts/fa-regular-400.woff2) format("woff2"),
    url(https://sw6.stalltechnik24.de/fonts/fa-regular-400.ttf) format("truetype")
}

Die Verlinkung ist korrekt und unter der URL kann ich die Dateien herunterladen.

Mit diesem Code möchte ich ein Icon auf der Seite anzeigen lassen:

.delivery-information.delivery-available::after {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 40px;
    font-family: 'Font Awesome 6 Free';
    content: '\f48b';
    font-weight: 400;
    font-size: 24px;
    text-align: center;
    color: #253237;
    z-index: 4;
}

Leider wird das Icon nicht angezeigt. Es erscheint immer nur ein Platzhalter.

Laut Browserkonsole gibt es keine Probleme.

Was mache ich hier falsch?

2

Hallo, überprüfe noch mal, die Anweisungen im Stylesheet. So wie Du das hier eingetragen hast funktioniert es schon seit einigen Versionen nicht mehr.

Hier in der Hilfe sind ein paar Beispiele für SCSS Einbindung.

https://docs.fontawesome.com/web/use-with/scss

3

Erst einmal vielen Dank.

Im Prinzip wird aber hier https://docs.fontawesome.com/web/add-icons/pseudo-elements genau das beschrieben, was ich vorhabe.