Die Verwendung von Symbolen in Webseiten oder Online Shops realisiert man seit geraumer Zeit mit der Hilfe von entsprechenden Symbol-Schriftarten. Eine sehr bekannte ist Font Awesome. Die Schriftart ist Open Source und kann für kommerzielle Projekte kostenlos eingesetzt werden. Sie beinhaltet zur Zeit 439 skalierbare Vector Icons deren Größe, Farbe und Schatten mittels CSS angepasst werden kann.
Die Integration ist zwar auf der Projektseite beschrieben, kann einen nicht so versierten Nutzer aber vor Probleme stellen. Wir haben für die Integration von Font Awesome in Magento oder WordPress die auf der Seite „EASY: Default CSS“ beschriebenen Methode in leicht veränderter aber einfacher anzuwendender Form verwendet:
Vorgehensweise zur Integration von Font Awesome in Magento oder WordPress:
- Download des gesamten Projektordners
- Entpacken des Ordner
- Upload des gesamten Ordners „font-awesome“ auf die root Ebene Ihrer Magento/Wordpress Installation
- In Magento unter System/Allgemein/Design im Bereich HTML Kopf/Diverse Scripte & Skripfverknüpfungen folgendes eintragen:
<link rel="stylesheet" href="/font-awesome/css/font-awesome.min.css">
Für die Integration in WordPress könnt ihr euch zur Integration des Links einfach das Plugin Insert Headers and Footers runterladen und den Link dann unter Einstellungen/“Insert Headers and Footers“ integrieren.
Verwendung der Font Awesome Icons in Magento oder WordPress:
- Rufen Sie die Icon-Übersicht auf.
- Klicken Sie das Icon an welches Sie verwenden möchten
- Verwenden Sie den dort angezeigten Code z.B. für das Auto
<i class="fa fa-car"></i> fa-car oder <span class="fa fa-car"></span> fa-car
an beliebigen Stellen in Magento (CMS Blöcke, Seiten, Kategorien…) oder WordPress (Beiträge, Seiten, Widgets)
Weitere Beispiele zur Integration finden Sie auf der Examples Seite. Man kann sich aber auch einfach das Cheatsheet ausdrucken.
Hat es bei euch funktioniert? Freue mich über Feedback…
Noch kein Kommentar, Füge deine Stimme unten hinzu!