Eigene Font Awesome Icons

Eigene Font Awesome Icons

Ewald Gering 29. November 2016 3

Man sieht es oft, die Shops verwenden andere Themes, aber die Icons sehen überall gleich aus. Das ganze soll jetzt ein Ende haben!

Wie schon oft auf diesem Blog erwähnt sind wir von Font Awesome begeistert.
Daher wollen wir euch zeigen, wie schnell man Icons in Shopware ändern kann.

before-fontawesome

So sieht das ganze mit Font Awesome Icons aus.

after-fontawesome

Font Awesome

Einrichten

Es gibt mehrere Möglichkeiten Font Awesome einzurichten. Wir entscheiden uns für den einfachsten. Font Awesome Getting Started

Dazu müssen wir den Code einbinden, den wir per E-Mail bekommen:

<script src="http://use.fontawesome.com/b1935d111a.js"></script>

Wo packen wir das ganze hin? Da es sich um Javascript handelt schauen wir uns in dieser Datei um:

themes/Frontend/Bare/frontend/index/header.tpl

Weiter unten in Zeile 94 finden wir den Code:

{* Add Modernizr in the ""-element to have all the classes before the page was rendered *} 
{block name="frontend_index_header_javascript_modernizr_lib"} 
{/block}

Wunderbar!

Wir können uns also an den Smarty Block frontend_index_header_javascript_modernizr_lib hängen.

Dazu legen wir die Datei header.tpl in unserem Theme an:

themes/Frontend/DEINTHEME/frontend/index/header.tpl

Da erweitern wir den Smarty Block und hängen den Code für die Javascript Datei von Font Awesome an.

{extends file="parent:frontend/index/header.tpl"}

{block name="frontend_index_header_javascript_modernizr_lib"}
{$smarty.block.parent}
<script src="http://use.fontawesome.com/b1935d222a.js"></script>
{/block}

Font Awesome ist korrekt eingebunden und wir müssen die Icons nur noch verwenden.

Icons verwenden

Wie können wir die Font Awesome Icons verwenden? Ganz einfach!

Ihr sucht euch ein Icon aus.

Uns gefällt das shopping-bag Icon besonders gut. Wenn ihr auf das Icon klickt seht ihr den Code für das Icon: shopping-bag Icon

Das Icon können wir mit folgendem Code benutzen

<i class="fa fa-shopping-bag"></i>

Also ändern wir den Einkaufswagen in die Einkaufstasche.

Dafür erstellen wir folgende Datei:

themes/Frontend/DEINTHEME/widgets/checkout/info.tpl

Dort überschreiben wir den Block der Originalen Datei und ändern wie oben gezeigt, nur die eine Klasse.

{* Cart entry *}
{block name="frontend_index_checkout_actions_cart"}
<ul>
 	<li class="navigation--entry entry--cart"><a class="btn is--icon-left cart--link" title="{" href="{url controller='checkout' action='cart'}" name="IndexLinkCart">
<span class="cart--display">
{if $sUserLoggedIn}
{s name='IndexLinkCheckout' namespace='frontend/index/checkout_actions'}{/s}
{else}
{s namespace='frontend/index/checkout_actions' name='IndexLinkCart'}{/s}
{/if}
</span></a><span class="badge is--primary is--minimal cart--quantity{if $sBasketQuantity < 1} is--hidden{/if}">{$sBasketQuantity}</span> 

<span class="cart--amount">
{$sBasketAmount|currency} {s name="Star" namespace="frontend/listing/box_article"}{/s}
</span>
<div class="ajax-loader"></div></li>
</ul>
{/block}

Wie man sieht, tricksen wir ein bisschen, indem wir die neuen Klassen einfach dahinter packen.
Dadurch bleibt das Design der originalen Klasse erhalten.

Man kann natürlich über Less unseren Klassen ein eigenes Design verpassen und macht die originale icon--basket überflüssig.

Hol dir unseren kostenlosen E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 
Shop erstellst und verwaltest

3 Kommentare

  • […] } }); }); Nachdem wir gezeigt haben, wie man andere Icons wie z.B. die von FontAwesome einbinden kann, wollen wir nochmal auf die Buttons in der Navigation eingehen. Denn es wird die […]
  • Hi Ewald,
    danke für die Anleitung, sehr gut und einfach erklärt :-)
    Aber ist FA nicht sowieso schon in Shopware 5 eingerichtet und wird mit den Icons laufend aktualisiert?
    Zumindest hatte ich den Eindruck, auch beim Blick auf: http://8mylez.com/blog/shopware-5-jedes-icon-anpassen/
    Oder verwechsel ich da etwas?

    Grüße,
    Andrei
  • Hey Andrei,

    der Beitrag, den du nennst bezieht sich auf die in Shopware integrierten Icons. Die hier von Font Awesome eingebunden werden sind nochmal andere.
    Einige sehen sich zwar ähnlich, aber es sind andere als die von Shopware.

    Vielen Dank für dein Feedback!

    Viele Grüße,
    Ewald

Was denkst du?

Das Shopware eBook für Einsteiger!

shopware tutorial ebook mockup
Ausführliche Schritt für Schritt Anleitungen, Tipps & Tricks für alle, die gerne am eigenen Shopware Shop basteln.
Jetzt kaufen

Hol dir 

wertvolle Tipps 
für deinen
Shopware Shop

Wir zeigen dir, wie du deinen
Shopware 5 Shop optimieren
kannst.


Trage einfach deine
E-Mail Adresse ein:

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Shopware 5.3 - Wichtige Neuerungen auf einen Blick
Plugin Theme Struktur überschreiben und Plugins individuell anpassen
Logo Größe anpassen mit Less für Shopware 5
Theme: Eigenes Listing Layout erstellen
Wie du jedes Icon in Shopware 5 anpassen kannst
Wie Cronjobs bei Shopware funktionieren und wie du sie richtig einstellst
Shopware 5 - Wie du deine Shop Geschwindigkeit optimierst
4 Gründe warum du Shopware 5 lokal mit MAMP installieren solltest und wie du das anstellst
Vorsicht Shopware Update! Was du beim Updaten beachten musst
© 2017 by 8mylez. Powered by Goltfisch GmbH.