Was gibt es Schöneres? Das haben wir uns auch gefragt und uns auch gleich mal drangesetzt euch ein schönes Tutorial dazuzuschreiben. Anschnallen, es geht los! Übrigens: Wenn du noch Shopware 5 nutzt, dann findest du hier den passenden Beitrag, um Font Awesome lokal in Shopware 5 einzubinden.
- 1. Font Awesome lokal auf Shopware 6 einbinden, aber warum?
- 2. Was heißt lokal einbinden genau?
- 3. Was ist Font Awesome und was gibt es für Lizenzen
- 4. Font Awesome Dateien herunterladen
- 5. Ein Blick in den Ordner
- 6. Font Awesome Dateien ins Shopware 6 Theme laden
- 7. Font Awesome Dateien im head des Shopware 6 Themes verlinken
- 8. Es geht auch einfacher
- 9. Weiterführende Links
1. Font Awesome lokal auf Shopware 6 einbinden, aber warum?
Weil: DSGVO. Wenn wir die Font Awesome Icons nicht lokal auf unserer Seite einbinden, müssen wir eine permanente Verbindung zum Font Awesome Server haben. Früher, als das noch keinen interessiert hat, war das der Standard. Man nahm ein kleines Javascript Code Schnipsel, integrierte es im Header Code der Seite und schon konnte man die Font Awesome Icons in seinem Shop nutzen.
Technisch ist das zwar immer noch möglich, aber heutzutage absolut nicht empfehlenswert, da man sich mit ein paar Handgriffen ganz einfach vor unnötigen Abmahnungen schützen kann. Außerdem ist es nur fair diese Methode zu verwenden, um einfach korrekter mit den Daten der Besucher in unserem Shopware 6 Shop umzugehen.
2. Was heißt lokal einbinden genau?
Genau heißt das, dass die Dateien, die dafür verwendet, werden die kleinen bunten Icons zu generieren auf denselben Server geladen werden, auf dem sich auch unsere Shopware 6 Installation befindet. Das bewirkt dann, dass wir keine Verbindung zu einem externen Drittanbieter erstellen müssen. Damit handeln wir DSGVO-konform, da andernfalls unter anderem die IP-Adresse unserer Shop-Besucher an den Server von Font Awesome gesendet werden und man sich dort anhand der gesammelten Daten theoretisch ein Bild über den User machen kann.
3. Was ist Font Awesome und was gibt es für Lizenzen
Was es ist: Font Awesome ist eine Schriftart, die aus Icons besteht. Ähnlich wie es ein eigenes Icon-Set von Shopware gibt, gibt es auch Icons von verschiedenen Drittanbietern. Einer von ihnen ist Font Awesome, der eine umfangreiche und professionelle Auswahl an Icons bietet.
Was es für Lizenzen gibt: Die unterschiedlichen Lizenzen können unter folgendem Link eingesehen werden. Wer sich jetzt denkt, dass er mit der Free Version nur 10.000 Aufrufe im Monat haben darf, kann an dieser Stelle beruhigt werden, da es bei der lokalen Einbindung gar nicht von Font Awesome gezählt werden kann und somit auch nicht zutrifft. Sprich man kann auch mit der gratis Version so viele Aufrufe habe wie man möchte.
Wer eine Premium Lizenz erwirbt hat jedoch mehr Icons, mehr Funktionen und mehr Support. In diesem Tutorial werden wir uns jedoch auf die kostenlose Version beziehen. Es werden also weder einmalige noch wiederkehrende Kosten auf uns zukommen.
Es ist verboten, die Pro-Icons in Themes zu integrieren, die zum Verkauf angeboten werden. Wenn man ein Theme anbieten möchte und dieses mit Font Awesome Icons ausstatten will, ist es ausschließlich gestattet, die kostenfreie Version der Icons zu verwenden. Falls jedoch der Wunsch besteht, einen individuellen Shop zu gestalten, kann auch die kostenpflichtige Version genutzt werden. Hierfür muss jedoch der Shop-Betreiber selbst eine Font Awesome Lizenz erwerben und kann nicht die der Person, die das Theme erstellt hat, verwenden.
4. Font Awesome Dateien herunterladen
Bevor wir die Dateien direkt herunterladen, können wir uns hier vorher noch einmal ein wenig schlaumachen:
https://fontawesome.com/docs/web/setup/host-yourself/webfonts
Hier wird beschrieben, wie man grundsätzlich seine Font Awesome Icons lokal auf Shopware 6, oder einer x-beliebigen anderen Webseite einbinden kann. Zu Beginn wird man gleich aufgefordert, seine Font Awesome v6 Files bereitzuhalten.
Hier können wir die aktuelle Version (momentan Version 6) laden:
https://fontawesome.com/download
Wie im Screenshot zu sehen ist, können wir eine Version fürs Web und eine Version für den Desktop herunterladen. Wir wählen an dieser Stelle die For The Web Icons und da den linken Button mit Free For Web. So kommen wir an die gewünschten Icons und haben sie zumindest schonmal lokal auf unserem Rechner.
Weiter unten sehen wir auch, dass das Icon Set ständig aktualisiert wird. Heißt: Wer öfter Webseiten baut und Font Awesome Icons einbaut, sollte immer nach der aktuellen Version schauen, statt eine staubige Version aus seinem Archiv zu kramen und auf jungfräuliche Server zu laden.
5. Ein Blick in den Ordner
Ein Blick in den Ordner hat noch keinem geschadet, daher lasst uns mal reinsehen.
Wie wir sehen, finden wir eine Textdatei mit Infos zur Lizenz und zudem folgende Ordner:
• css
• js
• less
• metadata
• scss
• sprites
• svgs
• webfonts
Vorab: Wir werden definitiv nicht alle diese Dateien aus den ganzen unterschiedlichen Ordner benötigen. Welche wir genau brauchen, und wo wir die am besten hin-laden, das erkläre ich euch beim nächsten Punkt.
6. Font Awesome Dateien ins Shopware 6 Theme laden
Gehen wir mal davon aus, dass wir ein eigenes Theme verwenden. Hier gilt es zunächst einen Ordner mit dem Namen fonts und darin den Ordner fontawesome anzulegen.
Sofern der fonts Ordner in unserem Theme noch nicht angelegt wurde, dann sollten wir diesen unter folgendem Verzeichnis des Themes (bzw. Plugins) anlegen:
/src/Resources/public/fonts
Das Verzeichnis für unsere Font Awesome Dateien sollte also wie folgt lauten:
/src/Resources/public/fonts/fontawesome
Und hier laden wir nun diese beiden Ordner hoch:
css
webfonts
Hier kann auch noch einmal in den Shopware Docs nachgelesen werden, wie Assets grundsätzlich in Shopware 6 Plugins eingebunden werden:
https://developer.shopware.com/docs/guides/plugins/plugins/storefront/add-custom-assets.html
7. Font Awesome Dateien im head des Shopware 6 Themes verlinken
Als Nächstes, packen wir diesen Code in unseren Header. Auf der Font Awesome Seite wird es so beschrieben:
See the Pen
Untitled by Atilla Boz (@great2gether)
on CodePen.
Anschließend gilt es über die Konsole folgenden 3 Befehle auszuführen:
Auf eurem Server oder wenn ihr Dockware nutzt:
php bin/console theme:compile
php bin/console assets:install
php bin/console cache:clear
wer lokal mit MAMP entwickelt, optiert zu:
./psh.phar storefront:build
php bin/console assets:install
php bin/console cache:clear
Mit dem ersten kompilieren wir das Theme, mit dem zweiten installieren wir die neuen Assets (unsere Font Awesome Dateien) und der letzen leert den Cache.
Sollten wir mit dem Customizing Plugin von ThemeWare arbeiten, sollte das Plugin einmal deaktiviert und anschließend wieder deaktiviert werden.
Im Quellcode können wir dann auch im head Bereich sehen, wie unser Code jetzt aussieht:
Ob da alles funktioniert, erkennt ihr daran, ob sich beim Klick auf einen der Links auch wirklich die dazugehörige Datei öffnet. Wenn nicht, dann stimmt irgendetwas noch nicht so wirklich.
8. Es geht auch einfacher
Ja es geht einfacher, es gibt zum Beispiel Plugins die euch die Arbeit abnehmen können. Ich habe beim ersten Anlauf saftige 4 Stunden verbracht ein Icon zu Gesicht zu bekommen. Es kann einem also schon einiges an Geduld abfordern.
Die Plugins sind weiter unten verlinkt. Mit dem Blick auf die Bewertungen würde ich wahrscheinlich eher zum Foundation Plugin von moori tendieren, aber man kann ja beide kostenlos testen. Ich habe es aus Prinzip nicht gemacht, da jedes unnötige Plugin ein Plugin zu viel ist.
Mein Geheimtipp: Lasst es einfach von uns integrieren, so habt ihr keinen unnötigen Ballast in Form von Plugins und zudem seid ihr im Hinblick auf die DSGVO und den damit möglicherweise einhergehenden Abmahnungen auf der sicheren Seiten. Bist du bereit für deine loakl bei Shopware 6 eingebundenen Font Awesome Icons? Dann scrolle runter zu unserem Kontaktformular oder buche einen Termin über unser Kalender-Tool.
9. Weiterführende Links
Foundation Plugin (von moori)
https://forum.shopware.com/t/font-awesome-lokal-einbinden/86323
Font Awesome Integration Plugin (von almCode)
https://store.shopware.com/alm9999012372531f/font-awesome-fontawesome-fa-integration.html
Shopware Forum: Icon Font in Shopware 6?
https://forum.shopware.com/t/icon-font-in-shopware-6/64570
Du brauchst Hilfe bei der Umsetzung mit Shopware? Dann setze dich jetzt mit uns in Verbindung.