Eigene Icons einbinden

Eigene Icons einbinden

In diesem Beispiel zeigen wir wie du ein Warenkorb-Icon im Template durch ein anderes austauschen kannst.

Passendes Icon aussuchen

Im Template sind Fontawesome-Icons der Free Version 5.1 verbaut. Wir überschreiben das vorhandene Icon mit unserem eignen.
  1. Gehe auf die Seite, suche dort ein Icon aus.
  2. Kopiere den Unicode oben rechts z.B. "f291".
  3. Gehe in den Theme Editor auf die Datei "custom_crit.scss" und füge dort folgendes ein.
  1. .fa-shopping-cart::before {
  2.     content: "\f291" !important;
  3. }

    • Related Articles

    • Fontawesome Icons in der Pulldown-Navigation anzeigen

      Beim Trade-Template ist es möglich neben der Kategoriennamen kleine Icons darzustellen. Die Icons sind eine Schriftart, namens Font Awesome. Ein neues Funktionsattribut anlegen Erstelle in JTL-Wawi ein neues Funktionsattribut für den Bereich ...
    • Eigene Badges in der Pulldown-Navigation

      Beim Trade-Template ist es möglich neben der Kategorienamen auch kleine Badges anzuzeigen. Das können kleine Hinweise sein, wie Neu, Top, Best etc. Ein neues Funktionsattribut anlegen Erstelle in JTL-Wawi ein neues Funktionsattribut für den Bereich ...
    • Hinweis in der Topbar einfügen oder bearbeiten

      In der Topbar ist es möglich zwischen dem Google Translator und den Links einen individuellen Hinweis anzuzeigen. Hinweis einfügen / bearbeiten Der Hinweis im JTL-Shop 5 ist standardmäßig nicht belegt und kann über die Sprachverwaltung eingefügt ...
    • Mehrfaches Einbinden von Inhalt-Bausteinen

      Die Templates sind so gestaltet, dass jeder Baustein bei Bedarf nicht nur mehrfach genutzt werden kann, sondern auch einen eigenen relativ einfach erstellt werden kann. Wie das geht, kläre ich in diesem Artikel. Bestehenden Baustein mehrfach ...
    • Footer einstellen und eigene Inhalte einfügen

      Die Inhalte im Fussbereich können individuell eingestellt werden, wie das genau geht, zeigen wir in diesem Artikel. Eigene Boxen/Inhalte im Footer erstellen Gehe nach <Standardelemente> <Footer / Boxen> und scrolle bis zum Footer-Bereich. Dabei ...