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.

Übersicht:

1. Was brauche ich, um Shopware 6 Plugins in der Datenbank zu deaktivieren?

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

Font Awseome lokal bei Shopware 6 - Anleitung

Font Awseome lokal bei Shopware 6 – Anleitung

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

Font Awseome lokal bei Shopware 6 - Downoads

Font Awseome lokal bei Shopware 6 – Downoads

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 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.

Font Awseome lokal bei Shopware 6 - Ordner

Font Awseome lokal bei Shopware 6 – Ordner

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 anlegen:

/src/Resources/app/storefront/src/assets

Das Verzeichnis für unsere Font Awesome Dateien sollte also wie folgt lauten:

/src/Resources/app/storefront/src/assets/fonts/fontawesome

Und hier laden wir nun diese beiden Ordner hoch:

css
webfonts

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:

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:

Font Awseome lokal bei Shopware 6 - Quellcode

Font Awseome lokal bei Shopware 6 – Quellcode

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. Dateien per SCSS einbinden

Kommen wir zur Königsdisziplin, dem Einbinden der Font Awesome Icons per mit SCSS statt CSS. Bereit? Gut. Ich noch nicht… Ich mach mir eben einen Kaffee und gönne mir eine Milch-Schnitte. Vielleicht lease ich auch kurz noch eine Riva Athena 115.

Ok.. Ich bin einfach zu müde und mir fallen die Finger ab. Also gibt es nur schonmal einen Wink mit dem Zaunpfahl statt der servierfertigen Lösung. Also: Hier ist das Konzept ähnlich wie mit den LESS Dateien bei Shopware 5, genauer erklären wir das ganze im dazugehörigen Beitrag, den wir oben bereits verlinkt hatten.

9. 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.

10. 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.