Dieses Tutorial zeigt dir wie du das beliebte Icon-Set Font Awesome in deiner Shopware-Einkaufswelt verwenden kannst.

Für alle, die noch nicht wissen was Font Awesome so awesome macht:
Font Awesome ist eine Icon-Schrift, d.h. sie stellt dir Symbole statt Buchstaben zur Verfügung. Das hat einige Vorteile. Zunächst einmal verbrauchst du weniger Speicherplatz als mit herkömmlich bildbasierten Icons. Sie kann außerdem verlustfrei auf jede beliebige Größe skaliert werden (so wie du das bei einer herkömmlichen Schrift auch machen kannst) Und: Sie ist über die CSS leicht in Größe, Farbe und Form veränderbar.

Diese awesome Font bindest du mit folgenden Schritten in deine Einkaufswelt ein:

1. Binde die externe CSS von Font Awesome ein.

Um Font Awesome verwenden zu können, reicht es aus eine externe CSS Datei einzubinden. Hierfür bietet Shopware in der Themekonfiguration (Einstellungen » Thememanager » Theme konfigurieren » Konfiguration) eine Einstellung in der wir den entsprechenden Pfad hinterlegen können.

2. Installiere das ’Erweiterter TinyMce’ Plugin.

Wie in der Dokumentation von Font Awesome beschrieben, kannst du die Icons wie folgt einbinden:

(für neuere Shopware Versionen: “

 

“)

Problem dabei: Der in Shopware verwendete Editor “TinyMCE” lässt einige HTML-Tags standardmäßig nicht zu. Dazu gehört auch das -Tag. Deshalb wirst du im Browser zunächst kein Icon sehen, wenn du diese Art von Code in deine Einkaufswelt einbindest.

Abhilfe schafft das Plugin ‘Erweiterter TinyMce’, das 2014 im Shopware-Community-Forum vorgestellt wurde. Hiermit lassen sich die meisten Einstellungen des Shopware-Editors bearbeiten. Folgendes musst du tun:

  • Lade das Plugin über den Pluginmanager hoch und installiere es dort.
  • Ändere Folgendes in den Plugineinstellungen:
    • Stelle ‘Konfiguration „extended_valid_elements” verwenden’ auf “Ja”
    • Füge in der Einstellung darunter “i[class],” hinzu.

Damit die Einstellungen funktionieren, musst du für den Benutzer die Einstellung “Erweiterter Editor” aktivieren.

3. Füge die -Tags in deinen Editor ein.

Nachdem du die CSS eingebunden und das Plugin installiert hast, kannst du die -Elemente, sowie deren class-Attribut im Editor verwenden.

Wie in 2. beschrieben nutzt du dafür die -Tags. Die Icons und die dazugehörenden Tags findest du auf der Font Awesome-Website. Copy-Paste – fertig!

* Die in der Blog-Grafik verwendeten Icons gehören zum Font Awesome-Iconset.