ブレッドクラム区切り記号の変更

デフォルトでは、パンくずリストは次のようになります。ホームページ>カテゴリ>製品。

大なり記号（>）を変更したいと思います。それを生成するコードは

vendor/magento/magento2-base/lib/web/css/source/lib/_breadcrumbs.less 

次のようになります：

.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);
        }
    }
}

私が定義を見つけた唯一の場所@breadcrumbs-separator__symbolは

vendor/magento/magento2-base/lib/web/css/source/lib/variables/_breadcrumbs.less

falseと定義されている場合

@breadcrumbs-separator__symbol: false;

@breadcrumbs-separator__symbol結果をオーバーライドすると、奇妙なシンボルが表示されます。

私が選んだシンボルの代わりに。

さらに混乱を招くように、生成されたhtmlでは、シンボルの内容が '\ e608'であり、_icons.lessファイルからのように見えます。

誰もがここで何が起こっているのか、それを変更する方法を説明できますか？

どんな助けでもありがたいです！

アイコンに関する説明

見つけた変数は誤解を招くようなものです。@breadcrumbs-separator__symbolそれはシンボルのように聞こえますが、それはそれを定義するものではありません。

あなたが探している変数は：

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

@icon-nextで定義されています/lib/web/css/source/lib/variables/_icons.less。

@icon-next: '\e608';

\e608で定義されたUnicodeであるapp/design/frontend/Magento/luma/web/fonts/Luma-Icons.svg、対応するグリフを生成します。

<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" />

これらのSVGファイルは、MagentoチームによってIcoMoonで生成されます。

したがって、このシステムは基本的に、アイコンの生成に使用されるアイコンフォントを定義します（慣れている場合はFontAwesomeに似ています）。lumaの場合、フォントは次の@icons__font-name変数で定義されますapp/design/frontend/Magento/luma/web/css/source/_theme.less。

@icons__font-name: 'luma-icons';

/lib/web/css/docs/icons.htmlアイコンについてのすべてを詳細に説明している非常に便利なドキュメントを（ブラウザで開いて見栄えがするように）見つけます。

それを変更するにはどうすればよいですか？

あなたの最善の策は、既存のSVGに基づいて独自のフォントを作成することです。IcoMoonが既存のSVGの編集をサポートしているかどうかはわかりませんが、それはその考えです。

新しい変更されたブレッドクラムアイコンを使用して独自のSVGファイルを作成し、にアップロードしapp/design/frontend/Vendor/Theme/web/fonts/my-font.svgます。

次にapp/design/frontend/Vendor/Theme/web/css/source/_theme.less、@icons__font-name変数を編集して次のように変更します。

@icons__font-name: 'my-font';

将来の読者のために：上記の解決策は私にはうまくいきませんでした。

font-familyは「my-font」に変更されましたが、表示されたアイコンは元の（>）のままであり、「my-font.svg」で「e608」として定義したものではありません。

font-familyはどの.svgファイルを使用するかを決定するものではないようです。

_icons.lessを拡張し、@ icon-nextの値を上書きし、元のファイルに存在するアイコンを使用しました。

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

以下のコードを_theme.lessアクティブなテーマに追加します。

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

これは、これを行う「正しい」方法ではありませんが、問題に対する遅延ソリューションです。私はこの問題に遭遇して交換するために必要なとき>に/私は、CSSの上書きをしました。

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

@breadcrumbs-icon__font-content: '/';これを達成するために、単に_theme.lessに追加しました。