Ändern des Brotkrumen-Trennzeichensymbols

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__symbolist 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__symbolergab 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.lessDatei stammt .

Kann jemand erklären, was hier los ist und wie man es ändert?

Jede Hilfe wird geschätzt!

Erklärungen zu Symbolen

Die Variable, die Sie gefunden haben, ist irreführend. @breadcrumbs-separator__symbolklingt wie es das Symbol ist, aber das ist es nicht, was es definiert.

Die Variable, die Sie suchen, ist:

@breadcrumbs-icon__font-content: @icon-next;

Das @icon-nextist definiert in /lib/web/css/source/lib/variables/_icons.less:

@icon-next: '\e608';

Das \e608ist eine Unicode definiert in app/design/frontend/Magento/luma/web/fonts/Luma-Icons.svgder entsprechenden Glyphen zu generieren:

<glyph unicode="&#xe608;" d="M383.415 226.596l-212.571 218.587-37.285-34.981 178.286-183.277-183.278-188.452 36.48-35.657 205.659 211.456-0.201 0.201z" />

Diese SVG-Dateien werden vom Magento-Team mit IcoMoon generiert.

Daher definiert dieses System im Wesentlichen eine Symbolschriftart, die zum Generieren des Symbols verwendet wird (ähnlich wie FontAwesome, wenn Sie damit vertraut sind). Für Luma wird die Schriftart durch die @icons__font-nameVariable unter definiert app/design/frontend/Magento/luma/web/css/source/_theme.less:

@icons__font-name: 'luma-icons';

Unter /lib/web/css/docs/icons.html(öffnen Sie es in einem Browser, damit es gut aussieht) finden Sie ein sehr nützliches Dokument, das alles über Symbole im Detail erklärt.

Wie kann man das ändern?

Ich denke, Ihre beste Wette ist es, Ihre eigene Schriftart basierend auf der vorhandenen SVG zu erstellen . Ich bin nicht sicher, ob IcoMoon die Bearbeitung vorhandener SVG unterstützt, aber das ist die Idee.

Erstellen Sie also Ihre eigene SVG-Datei mit Ihrem neuen modifizierten Breadcrumbs-Symbol und laden Sie es hoch app/design/frontend/Vendor/Theme/web/fonts/my-font.svg.

Bearbeiten app/design/frontend/Vendor/Theme/web/css/source/_theme.lessund ändern Sie dann die @icons__font-nameVariable in:

@icons__font-name: 'my-font';

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.

## file app/design/frontend/<vendor>/<theme>/web/css/source/_icons_extend.less
@icons-next: '\e617';

Fügen Sie den folgenden Code in _theme.lessIhr aktives Thema ein.

@breadcrumbs-icon__use: false;
@breadcrumbs-separator__symbol: '|';

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.

.items {
    > li {
        &:not(:last-child):after {
            content: '/';
            font-size: 24px;
            line-height: 15px;
        }
    }
}

Ich habe einfach @breadcrumbs-icon__font-content: '/';zu _theme.less hinzugefügt , um dies zu erreichen.