Eigene Icons verwenden

Hallo!

Ich möchte gern unsere bisherigen Icons durch welche ersetzen, die wir selbst gestaltet haben.
Mein Problem ist, ich finde im Code nicht die richtige Stelle, wo ich einen eigenen Bildlink hinterlegen kann.
Kann mir hier jemand helfen?
Es geht um Icons wie Warenkorb, Account, Suche, in der Menüzeile und unten im Policy Block:

Bildschirmfoto 2021-03-03 um 09.51.51.png

Bildschirmfoto 2021-03-03 um 09.51.31.png

Bildschirmfoto 2021-03-03 um 09.51.26.png

Nutzen das Bicycle-1.0.0-sections-ready Theme (Ella)

1 Like

Hi Katja! @Katja-LanaKK

Wow, das Ella Theme is ein tolle Wahl, Hut ab! Ihr wollt aber diese Icons zu euren eigenen Icons ändern, ist das richtig?

image.png

Diese Icons im Ella Theme zu ändern verlangt eine umfassende Programmierung über mehrere liquid Dateien und hier rate ich den Service eines Experten wie Mario ( @r8r oder @tewe ) oder www.taskhusky.com zu verwenden. Die Ella Entwickler können da ggf. auch helfen wenn du sie hier anschreibst.

Falls du es lieber doch DIY (do-it-yourself) machen möchtest, habe ich weitere Ressourcen zu diesem Thema hier gefunden:

1 Like

Hey Gabe!

Danke für Deine schnelle Antwort. :blush:

Mittlerweile konnte ich selbst einiges herausfinden bezüglich der Icons.
Für die Icons bei “Mein Account” und “Einkaufswagen” habe ich den Code bearbeitet.
Für “Mein Account” ins icon_user.liquid einfach ein Imagetag: Mein Konto
Für den Einkaufswagen das gleiche in icon-cart.liquid, für die Suche icon-search.liquid.

In der Menüzeile und dem Policy Block wars eigentlich noch einfacher als gedacht. Dort kann man direkt über “Anpassen” den Imagetag bei Icon #01, Icon #02 …usw. eintragen:

Ich dachte irgendwie man muss zwangsläufig auch im Code etwas ändern um da ran zu kommen - zu kompliziert gedacht. :grin:

@Katja-LanaKK

Du bist offensichtlich ein Power-User also Respekt! Gut gemacht…

Hallihallo,

leider bin ich mal so gar kein PowerUser - hätte aber genau das gleiche Problem. Im Theme Highlight würde ich ebenfalls gerne die Zeichen für Warenkorb und Suche ändern.

Lottaswunsch_1-1634458623698.png

Und zwar in die folgenden Icons:

https://lottaswunsch-my.sharepoint.com/:i:/g/personal/diana_lottaswunsch_de/Ec_1SCpIr9dFjNr_Vv69FhsBJaUWWwcbP6jmp4vfoYva4w?e=conUc2

https://lottaswunsch-my.sharepoint.com/:i:/g/personal/diana_lottaswunsch_de/EYlvfsrJVQFIjYFv4ROPkPIB77SApG-cLPmh5eoO70w3JA?e=iMufsf

Ich würde mich sehr über Hilfe freuen! Daaaaaaaankeeeeeee!

@Lottaswunsch

Je nach Theme kann man sowas mit den folgenden Schritten ausführen aber bitte das mit einem Experten (siehe oben) und in einer Theme-Kopie zuerst. Gehe in das icon-cart.liquid und ersetze den <img src="https....> mit deinem neuen <img src=https...>

Dann ganz unten im theme.css den folgenden code einsetzen um die Icon Größe zu korrigieren:

.site-header__cart img {
width: 25px;height: 25px; 

 }