Gratis Icons in Shopware 5: Onboard & Font Awesome

Icons haben haben an vielen Stellen im Webdesign Bild-Dateien abgelöst. Dies hat viele Gründe. Sie lassen sich zB in ihrer Größe per Style-Tag anpassen. Bilder würden einfach verpixeln. Im Netz findet man unzählige Icon Sets, teils kostenpflichtig, aber auch kostenlos. Das berühmteste kostenlose Icon-Set dürfte wohl von Font Awesome stammen, welche ein breites Set an Icons anbieten, welche als Schriftart per CSS eingebunden werden können.

Shopware 5 ist nicht nur meiner Meinung nach das derzeit beste Shopsystem. Es bietet viele Möglichkeiten einen tollen Shop, perfekt für derzeitige Shopping-Gewohnheiten ausgestattet, kostenlos zu erstellen. Neben vielen Plugins aber gibt es auch Features, welche von der Shopware AG gar nicht ans große Brett gehangen werden: Das bereits integrierte Icon Set. Ja richtig gelesen, Shopware 5 bringt von Haus aus ein Icon Set mit – und nirgends findet man eine Übersicht.

Shopware 5 – Icon Übersicht und Integration

Die einzige Möglichkeit: Alle Icons auf einer Testseite einbinden und ansehen. Aber auch die Icon-Kürzel muss man erstmal finden. Diese gibt es nach meiner Recherche nur auf Github und nicht auf der Shopware-Seite selbst. Es gibt sogar kaufbare Plugins mit Icons – obwohl das bereits alles vorhanden ist. Man muss nur wissen wo. Damit die Sucherei ein Ende hat, gibt es hier eine Übersicht der Icons. Beim Klick auf das Bild, gelangt ihr auf eine größere Darstellung.

Eingebunden werden die Icons einfach per CSS Klasse, bspw: <span class=“icon–star“></span>

Icon Cheatsheet der Shopware 5 Icons

Die Übersicht, wie die Kürzel heißen, findet ihr hier: Shopware Icons auf Github.

Icon Übersicht in Shopware 5

Icon Übersicht in Shopware 5

 

Font Awesome Icons per CSS in Shopware 5 einbinden

Sollte dennoch der Bedarf vorhanden sein die Icons von Font Awesome, so bietet Shopware 5 auch hier eine, naja, fast perfekte Lösung. In der Theme Konfiguration besteht die Möglichkeit eine CSS einzubinden. Wer jetzt denkt, dass man hier einfach den Pfad zur CSS-Datei eintragen muss – was man bei dem Hinweis „weitere CSS Datein“ so verstehen könnte, der kann hier lange probieren. In der tat muss hier eine vollständige Einbindung einer Style-Datei erfolgen. Das hätte man komfortabler gestalten können.

Font Awesome Icons per CSS in Shopware einbinden

Font Awesome Icons per CSS in Shopware einbinden

Der Code muss wie folgt eingebunden werden:

<link rel=“stylesheet“ href=“//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css“ />

Eine Übersicht der Font Awesome Icons findet ihr hier: Zur Icon Übersicht von Font Awesome

Diese können ebenso per „class“ eingebaut werden. In diesem Sinne, Happy Iconing 😉

Loading Facebook Comments ...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.