Anleitung Font Awesome Icons in den Kategorien

Wir haben längere Zeit rumprobiert FA Icons schön in die Kategorien einzubinden. Die bisherigen Anläufe waren sehr unschön und mit viel zu viel CSS oder einem <i class> tag in dem eigentlichen Kategorienamen verknüpft. Ein Ticket/Wunsch dazu wurde vor 2 Jahren geschlossen.
Heute haben wir daher eine sehr saubere Lösung umgesetzt, die responsive, sprachenübergreifend und individuell anpassbar funktioniert. Die Updatesicherheit ist selbstredend



Wer Live gucken will: Shop

Ladet aus /templates/Honeygrid/boxes die Dateien box_categories.html und box_categories_top.html herunter.
An beide Dateien -USERMOD anhängen.

box_categories-USERMOD.html in ca. Zeile 25 das suchen

Code:

{$categories_item.data.name|replace:"&":"&"|replace:"&":"&"}

ersetzen durch

Code:

<div class="faicon--{$categories_item.data.id}">{$categories_item.data.name|replace:"&amp;":"&"|replace:"&":"&amp;"}</div>

box_categories_top-USERMOD.html in ca. Zeile 17 das suchen

Code:

{$categories_item.data.name|replace:"&":"&"|replace:"&":"&"}

ersetzen durch

Code:

<div class="faicon--{$categories_item.data.id}">{$categories_item.data.name|replace:"&amp;":"&"|replace:"&":"&amp;"}</div>

Was passiert da?
Die Smarty-Variable {$categories_item.data.name} (Kategoriebezeichnung) bekommt in der Navigation einen div Container verpasst. Der Name des Containers wird für jede Kategorie anhand ihrer ID dynamisch generiert und erhält das Präfix "faicon--".
Das ist deshalb sinnvoll, weil bei mehrsprachigen Shops pro Kategorie nur ein CSS Style erstellt werden muss. Wir haben z.B. die Kategorie "Einzelstücke" auf deutsch und die selbe "single pieces" auf englisch. Beide können wir dadurch mit den selben Styles versehen. Desweiteren bietet es den Vorteil, dass man bei Umbennenung oder neuer Anordnung der Kategorien nicht auch die CSS Klassen im Stylesheet ändern oder mit :nth-child aufpassen muss.


Als nächstes müssen nur noch im StyleEdit oder unter /templates/Honeygrid/usermod/css die Styles hinterlegt werden.
Zu den Screenshots oben sehen diese so aus und enthalten das Pseudoelement :before. Der Content (z.B. "\f005";) ist der Unicode von FontAwesome zum jeweiligen Icon und kann bei FA auf der Seite gefunden werden.

Code:

.faicon--102:before, .faicon--75:before, .faicon--196:before, .faicon--193:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right:5px;
}


.faicon--102:before{ /*Neue Modelle */
    content: "\f005";
    color: #f49b42;
}

.faicon--75:before{ /*Einzelstücke */
    content: "\f3a5";
    color: #ffa5bd;
}

.faicon--196:before{ /*sale */
    content: "\f295";
    color: #f00;
}

.faicon--193:before{ /*Lady/uni */
    content: "\f228";
    color: #00b2ff;
}

 

Ich kenne sowas, hatten wir bei einigen Änderungen auch immer wieder und wir vermuten, dass es an Problemen beim Hoster/PHP Einstellungen lag. Änderungen an CSS oder im Inhalt (Content Manager) wurden einfach nicht übernommen.

Wenn du so ein Problem hast und nichts hilft, mache eine kleine Änderung am Shop wie z.B. eine Kategorie deaktivieren oder zeitweise umbenennen. Cache leeren. Nimm dann einen anderen Browser her und schaue die Änderung an. Wenn dann die kleine Änderung nicht sichtbar ist, dann spinnt der Hoster.
Wenn du sie aber siehst, hast wirklich einen Dreher im CSS/HTML Code.