Kategorienfilter Schaltflächen um Icon ergänzen

Veröffentlichungsdatum: 22. Oktober 2018
Änderungsdatum: 08. August 2023
Projektgrundlage: BASE

Die Schaltflächen das Kategoriefilters können Sie sehr einfach visuell über Symbole oder Icons hervorheben.

Kategorienfilter mit Icon / Symbol

Sie wollen die Text-Schaltflächen des Kategoriefilters zusätzlich um ein Symbol bzw. eine Grafik /Bild vor dem Text erweitern?

Eine Möglichkeit, dies entsprechend vorzunehmen ist der Einsatz des Pseudo CSS-Elementes :before, zu welchem Sie nachfolgend Beispiele finden.

Beispiel: Auszug aus elementCategoryFilterList.scss zur Erweiterung der Schaltflächen

/* Schaltfläche um Icon erweitern - data-value entspricht Shop-Kategorie Systeme */
#filterElement-categories span[data-value="254275254275"]::before {
  content: url('/basemfbAssets/img/produkte/blueline-12x16.png');
  position: relative;
  top:4px;
}
/* Schaltfläche um Text-Symbol erweitern - data-value entspricht Shop-Kategorie Zubehör */
#filterElement-categories span[data-value="913427913427"]::before {
  content: '#';
  color: #666666;
  font-size: 1rem;
}