Wie binde ich Font Awesome in Shopware 6 richtig ein?
Ich habe es bereits wie eine Schrift versucht einzubinden. Das hat soweit vermutlich auch geklappt, allerdings weiß ich nun nicht wo mein Fehler ist oder ob es generell in Shopware 6 noch nicht geht. Ich habe nun die Font Awsome (gesamter Ordner mit allen möglichen Ordnern also auch css, less, scss) als Schrift hier hinterlegt custom/plugin/[Theme]/src/Recources/public/font/[Ordner mit Schrifttitel] und mit ./psh.phar storefront:build wurden die Dateien auch richtig in den Ordner _ public/bundles/ _ übertragen. Ich habe dann die Dateien in der base.scss hinterlegt:
Nun werden die Icons aber immernoch nicht richtig im Frontend angezeigt und ich verzweifle langsam. Ich habe schon nach Pfad-Fehlern geschaut aber scheint alles meiner Meinung nach richtig zu sein. Ich habe auch schon hinter die Datei bezeichnungen noch .scss geschrieben das es in Font Awesome so beschrieben wird https://fontawesome.com/how-to-use/on-the-web/using-with/sass . Muss man Font Awesome vielleicht anders einbinden? Leider habe ich bisher auch niemanden gefunden der das bereits gemacht hat. Gibt es jemanden der das schon hinbekommen hat?
Oder gibt es da vielleicht grundsätzlich ein Problem beim Übertragen von Variablen und verknüpfungen bezüglich Font Awesome?
Ich denke mal letzten Endes ist es warscheinlich nur ein simpler Denkfehler und dann läuft das aber ich komme leider nicht allein drauf. Kann mir jemand helfen?
ich habe mir im theme-plugin unter src/Resources/app/storefront/src/scss/ einen ordner für die FA-scss dateien erstellt und die dort abgelegt (darin dann aber die Verzeichnisstruktur von FA beibehalten.)
in der base.scss importiere ich dann diese dateien ("@import ‚fa/fontawesome‘" usw.). Die dazugehörigen fonts habe ich nach /src/Resources/app/storefront/src/assets/font/ in meinem Theme kopiert. als letztes musst du noch die _variables.scss von FA anpassen, damit das kompilierte css auch weiß, wo es die Font-Dateien findet: „$fa-font-path: „…/assets/font“ !default;“
nach einem storefront:build sollte FA dann auch im Frontend (und auch nur da) funktionieren.
@mediaciety was meinst du genau mit die dazugehörigen Fonts? Meinst du damit den Webfonts-Ordner?
Ich habe es nun so probiert wie du es geschrieben hast und auch das funktioniert bei mir nicht.
Ich schätze mal das aber hier der Pfad in der _variables.scss auch nicht stimmt? denn laut dem Pfad gehst du einen ordner höher und dann in assets oder sehe ich das falsch?
Der Pfad in der _variables.scss sollte so passen. Durch das importieren gehst du immer relativ von der base.scss aus durch den Verzeichnisbaum.
Den einzigen Unterschied, den ich jetzt entdecken kann, ist, dass ich die fonts nicht noch in einen Unterordner gepackt habe - das sollte aber nicht das Problem sein.
Was sagt denn die entwicklerkonsole deines Browsers? Ich würde raten, dass da einige 404 zu den Schriftart-Dateien von FA sind?
Was passiert, wenn du auf der Konsole assets:install ausführst?
Grundsätzlich solltest du in /public/themes/einlangerhash/assets die ordnerstruktur und Dateien aus deinem Theme wiederfinden…
@mediaciety Ich habe nur die Fonts nochmal in einen seperaten ordner kopiert, da du es oben so ungefähr so beschrieben hattest. Aber trotzdem habe ich den Webfontsordner auch in der normalen Verzeichnisstruktur von FA belassen.
Ich habe nochmal ./psh.phar storefront:build und auch bin/console assets:install durchgeführt aber in der Entwicklerkonsole wird mir kein Fehler angezeigt. Heißt es müsste doch eigentlich schon funktionieren? Oder?
Ich habe das icon versucht wie folgt einzubauen vielleicht liegt ja auch hier ein Fehler den ich nicht sehe?
In der Prod Umgebung habe ich aber ein Problem das in der all.css ein Import durchgeführt den ich mir nicht erklären kann: @import url("~scss/variables");
In den Screenshots habe ich das noch genauer dargestellt, kann mir jemand einen Tipp geben was das Problem ist, bevor ich das ganze Bundling untersuche
jetzt habe ich den Fehler gefunden, in dem Plugin: SwagCustomizedProducts, dass es mit der Pro Version gibt, ist in dem scss File: _customized-product.scss der oben beschriebene Import.
Screenshots