Eigene Font Awesome Icons

Eigene Font Awesome Icons

Ewald Gering 29. November 2016 5

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

5 Kommentare

  • Hallo Eiwald,

    ich bin eher zufällig auf Deinen Blog gestoßen und finde ihn ausgesprochen hilfreich! Dickes Lob.
    Nun wollte ich mich daran machen und u.a. das Thema "Eigene Font Awesome Icons" einbinden angehen.

    Leider bekomme ich es irgendwie nicht hin. Zum einen unterscheidet sich Dein Beispielcode von meiner info.tpl. Bei mir schaut der so aus:

    "{* Cart entry *}
    {block name="frontend_index_checkout_actions_cart"}



    {if $sUserLoggedIn}
    {s name='IndexLinkCheckout' namespace='frontend/index/checkout_actions'}{/s}
    {else}
    {s namespace='frontend/index/checkout_actions' name='IndexLinkCart'}{/s}
    {/if}


    {$sBasketQuantity}




    {$sBasketAmount|currency} {s name="Star" namespace="frontend/listing/box_article"}{/s}


     

    {/block}"

    Zum anderen kann ich in Deinem Beispielcode nicht erkennen, wo Du "" eingebunden hast.
    Erstezte ich "icon--basket" mit "fa fa-shopping-bag fa-2x", dann bekomme ich zwar das gewünschte Icon, aber dieses ist dann nicht mehr linksbündig ausgerichtet.

    Was muss ich machen, damit das Icon links ausgerichtet wird?

    Viel Grüße,
    Tom
  • Hey Tom,

    vielen Dank für die netten Worte. Wir versuchen unsere Erkenntnisse immer zu teilen :)

    Du kannst mal schauen wie der Less Code bei dem 'icon--basket' aussieht und evtl. für das Font-Awesome Icon auch nutzen.

    Viele Grüße
    Ewald
  • […] } }); }); 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?

8mylez Community

SHOPWARE

FORUM

shopware tutorial ebook mockup

Werde Teil einer einzigartigen Wissensdatenbank!

Zum 8mylez Shopware Forum

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
Theme: Eigenes Listing Layout erstellen
Logo Größe anpassen mit Less für Shopware 5
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
Staging Umgebung – Was ist das und warum brauchst du eine?
Wie du jedes Icon in Shopware 5 anpassen kannst
Shopware Logo aus dem Footer entfernen
Shopware 5 - Wie du deine Shop Geschwindigkeit optimierst
Social Media Icon mit Link im Footer
© 2017 by 8mylez. Powered by Goltfisch GmbH.