Standardmäßig sehen die Semmelbrösel wie folgt aus: Homepage> Kategorie> Produkt.
Ich möchte das Symbol größer als (>) ändern. Der Code, der es generiert, befindet sich in
vendor/magento/magento2-base/lib/web/css/source/lib/_breadcrumbs.less
und sieht so aus:
.lib-breadcrumbs(
...
// Breadcrumbs separating symbol
@_breadcrumbs-separator-symbol: @breadcrumbs-separator__symbol,
...
& when not (@_breadcrumbs-separator-symbol = '') and not (@_breadcrumbs-separator-symbol = false) { // Insert separating symbol to "content"
.item:not(:last-child) {
&:after {
.lib-css(color, @_breadcrumbs-separator-color);
.lib-css(content, @_breadcrumbs-separator-symbol);
}
}
}
Der einzige Ort, für den ich eine Definition gefunden habe, @breadcrumbs-separator__symbol
ist in
vendor/magento/magento2-base/lib/web/css/source/lib/variables/_breadcrumbs.less
wo es als falsch definiert ist
@breadcrumbs-separator__symbol: false;
Das Überschreiben des @breadcrumbs-separator__symbol
ergab ein seltsames Symbol:
anstelle des von mir gewählten Symbols.
Um die Sache noch verwirrender zu machen, sehe ich im generierten HTML den Inhalt des Symbols '\ e608' und es sieht so aus, als ob es aus einer _icons.less
Datei stammt .
Kann jemand erklären, was hier los ist und wie man es ändert?
Jede Hilfe wird geschätzt!
quelle
Für zukünftige Leser: Die obige Lösung hat bei mir nicht funktioniert.
Die Schriftfamilie wurde zwar in "meine Schrift" geändert, aber das angezeigte Symbol war immer noch das Original (>) und nicht das, was ich in meiner "my-font.svg" als "e608" definiert habe.
Anscheinend bestimmt die Schriftfamilie nicht, welche SVG-Datei verwendet wird.
Am Ende habe ich _icons.less erweitert und den Wert von @ icon-next mit einem Beendigungssymbol in der Originaldatei überschrieben.
quelle
Fügen Sie den folgenden Code in
_theme.less
Ihr aktives Thema ein.quelle
Dies ist nicht der "richtige" Weg, aber es ist eine träge Lösung für das Problem. Als ich lief in dieses Problem und musste ersetzt werden
>
mit/
i nur eine CSS - Überschreibung tat.quelle
Ich habe einfach
@breadcrumbs-icon__font-content: '/';
zu _theme.less hinzugefügt , um dies zu erreichen.quelle