Fehlermeldung

Deprecated function: The each() function is deprecated. This message will be suppressed on further calls in _menu_load_objects() (Zeile 579 von /is/htdocs/wp10958967_DDBEHMF9R2/www/vhosts/make-better.de/htdocs2/includes/menu.inc).

Font Awesome in Shopware-Einkaufswelten einbinden

So machst du das – ein Mini-Tutorial
Font Awesome Shopware Tutorial

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:

<i class="fa fa-camera-retro"></i> 

(für neuere Shopware Versionen: "<p><i class="fa fa-camera-retro"></i> &nbsp;</p>")

Problem dabei: Der in Shopware verwendete Editor "TinyMCE" lässt einige HTML-Tags standardmäßig nicht zu. Dazu gehört auch das <i>-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 <i>-Tags in deinen Editor ein.

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

Wie in 2. beschrieben nutzt du dafür die <i>-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.

Haben Sie Fragen zu diesem Artikel?

Martin Plendl hilft Ihnen gern.

Martin Plendl - Fragensteller und Mehrwertschaffer bei make better

Martin Plendl ist mit der Beratung von Unternehmen betraut, die im Web erfolgreich werden oder bleiben wollen. Dazu gehören neben der theoretischen Ausrichtung auch die Konzeption, Durchführung und Auswertung von Newsletter-Kampagnen sowie die Gestaltung von Landeseiten. Die Betreuung mehrerer Webshops ergibt sich natürlich ebenfalls aus seiner Vita.

Martin Plendl
plendl@make-better.de
0451 62 06 68 50

Martin Plendl bei Xing Martin Plendl bei LinkedIn Martin Plendl bei Google+

Wir lieben was wir tun. Die Zusammenarbeit im Team und die Abwechslung durch starke Kundenprojekte - so entstehen Erfolge.

Wir definieren Ziele. Für die Werte, die wir gemeinsam mit unseren Kunden und Partnern schaffen und an denen wir uns messen lassen wollen.

Wir mischen Analyse, Strategie, Technologie und Design. Ob für Kunden oder eigene Projekte: Unser Wissenspool sorgt für neue Ideen.

Sicher ist: Wir lieben was wir tun.

make better - und alles bleibt besser!

Kontakt

0451 62 06 68 50
Auf Google+ besuchen

Fragen Sie uns! Wir antworten.

Die Daten werden nach abgeschlossener Bearbeitung Ihrer Anfrage gelöscht. Sie können Ihre Einwilligung jederzeit für die Zukunft per E-Mail an we@make-better.de widerrufen.

Detaillierte Informationen zum Umgang mit Nutzerdaten finden Sie in unserer Datenschutzerklärung.

CAPTCHA
Diese Sicherheitsfrage überprüft, ob Sie ein menschlicher Besucher sind und verhindert automatisches Spamming.