Font-Awesome-Icons richtig einbinden

Vorteile der Icon-Fonts

Der Einsatz und die Einbindung von Icon-Fonts bringt gerade in diesen responsiven Webdesign-Zeiten einige Vorteile mit sich. Die Flexibilität und und Bearbeitungsmöglichkeiten bietet viele Vorteile:

  • beliebig skalierbar / auflösungsunabhängig
  • gestochen scharf (auch bei Retina Displays)
  • leichte und flexible Einbindung
  • Anpassung per CSS (Farbe, Größe, aber auch CSS3-Effekte wie text-shadow, Rotation)
  • erlauben ein Gestalten im Browser
  • umfangreiches Angebot an Icon-Fonts (siehe unten)
  • auch mit älteren Webbrowsern kompatibel
  • geringer Speicherbedarf (im Vergleich zu mehreren Icons als Pixelbilder eingebunden)
  • tranparenter Hintergrund

 

1. Schritt
Gehen Sie auf die Seite der Font-Awesome-Bibliothek, indem Sie hier klicken.
Alternativ können Sie auch auf die Shopware-Eigenen Icon-Liste zugreifen.

2. Schritt
Wählen Sie das Icon aus, das Sie verwenden möchten.

Schritt-1

 

3. Schritt
Unter der Icon-Darstellung finden sie einen Icon-Code.
Kopieren Sie den Code innerhalb der Anführungszeichen und fügen Sie ihn in unserem Einkaufswelt-Plugin ein.

Schritt-3

Bitte geben Sie die Zeichenfolge in das nachfolgende Textfeld ein

Die mit einem * markierten Felder sind Pflichtfelder.