Wie Du Font Awesome Icons änderst

Wie Du Font Awesome Icons änderst

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.

Weitere Links

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: 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?

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Social Media Icon mit Link im Footer
Shopware Theme: Eigenes Listing Layout erstellen
Logo Größe mit Less für Shopware 5 anpassen
Die größten Fehler bei der Entwicklung eines Shopware 5 Themes

Sicher Dir die besten Shopware 6
Tipps & Tricks

Trag Dich ein und Du erhältst unser Shopware 6 Whitepaper kostenlos!
Trag dich für unseren Newsletter an, im Anschluss erhältst Du das Whitepaper. 

Mit dem Abschicken Deiner Daten akzeptierst Du unsere Datenschutzerklärung.

Entdecke unsere ebooks

Unsere Standorte

Zentrale 

Technologiepark 23
33100 Paderborn


Leipzig
Bernhardstraße 34
04315 Leipzig

Kontakt

Über 8mylez

✓ 38 Mitarbeiter

✓ Shopware Gold Partner

✓ 40.000+ Plugin Downloads

✓ 160+ betreute Shops

✓ Full-Service Shopware Agentur

✓ 70 Shopware Videos auf Youtube

✓ Alle Shopware Zertifizierungen

Social


Unsere Partner
© 2023 by 8mylez GmbH //  Impressum + Datenschutz