Fontawesome einbinden (WOFF Dateien)

Shopware 6 (German) Themes & Design
1

Ich habe mal eine kurze Frage:

Die SCSS Daten werden richtig über die theme.json eingebunden und sind in der all.css vorhanden.

Leider zeigt er mir nur die Fehlericons an und nicht die FontAweSome Icons.

In der Konsole zeigt er mir an das er die WOFF Daten nicht laden kann.

Ich habe dies in der theme.json

    "views": [
        "@Storefront",
        "@Plugins",
        "@SM2024"
    ],
    "style": [
        "app/storefront/src/scss/overrides.scss",
        "@Storefront",
        "app/storefront/src/scss/base.scss",
        "app/storefront/src/assets/fonts/fontawesome/scss/fontawesome.scss",
        "app/storefront/src/assets/fonts/fontawesome/scss/brands.scss",
        "app/storefront/src/assets/fonts/fontawesome/scss/solid.scss"
    ],
    "script": [
        "@Storefront",
        "app/storefront/dist/storefront/js/SM2024.js"
    ],
    "asset": [
        "@Storefront",
        "app/storefront/src/assets",
        "app/storefront/src/assets/fonts/fontawesome/webfonts"
    ]

Wer kann mir sagen wo gerade noch mein Fehler ist?

2

die FA-css verweist ja intern auf die Font-Dateien, normalerweise relative. Wenn Du die Css (in einer HTML gebunden) im Browser lädt sollten dann die 404-Fehler kommen. für den ersten Test dann die Datei wo gewünscht platzieren …

3

ja die verweisen relativ. Aber dennoch bekomme ich die fehlerhaften Icons weil er nicht die Dateien freigibt vom Pfad her.

Habe es jetzt mal in die meta.html.twig rein genommen:

{% block layout_head_stylesheet %}
    {{ parent() }}

    <link href="{{ asset('fonts/fontawesome/css/fontawesome.css', 'theme') }}" rel="stylesheet">
    <link href="{{ asset('fonts/fontawesome/css/brands.css', 'theme') }}" rel="stylesheet">
    <link href="{{ asset('fonts/fontawesome/css/solid.css', 'theme') }}" rel="stylesheet">

{% endblock %}

Aber auch hier sind die Daten nicht verfügbar.

Bin gerade ein wenig überfragt.

4

Was wird denn nu NICHT geladen ? Die einzelnen css, die gemergte css oder die Font-Dateien ?
Notfalls im Browser in den dev-tools schauen wo es einen Fehler gibt …

5

wenn ich diese per SCSS einbinde in der theme.json dann werden die Font Dateien nicht geladen.

Wenn ich diese wie im 2ten über die meta.html.twig einbinde dann werden diese nicht geladen bzw nicht gefunden.

Ich würde es gerne per SCSS über die theme.json einbinden aber dann findet er ja die Font Dateien nicht.

6

Wir haben in unserem Theme Font Awesome wie folgt per SCSS eingebunden - als Beispiel

@font-face {
    font-family: 'Font Awesome 6 Brands';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("#{$asset-path}/fontawesome64/fa-brands-400.woff2") format("woff2"), ...; 
}
7

das werde ich auch gleich mal probieren.
Das sollte auf jedenfall klappen.

Habe gerade versucht die _variables.scss von FontAwesome in der Zeile 49 anzupassen:

$fa-font-path           : "#{$asset-path}/fonts/fontawesome/webfonts" !default;

klappte aber nicht. Weil er mit den # davor nicht klar kommt. Wenn ich den rausnehme dann läuft es zwar durch aber im Quelltext steht dann:
https://example.de/theme/26074a4038c72ef2201df80d1effa364/css/{$asset-path}/fonts/fontawesome/webfonts//fa-brands-400.woff2

erstens wird die Variable nicht ersetzt und dann startet er aber dennoch im Verzeichniss css und nicht im assets

8

Versuche mal das hier

$fa-font-path           : "#{$app-css-relative-asset-path}/fonts/fontawesome/webfonts" !default;