Alteração do símbolo do separador de trilhas de navegação

Por padrão, as trilhas de navegação são parecidas com: página inicial> categoria> produto.

Gostaria de mudar o símbolo maior que (>). O código que o gera está em

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

e fica assim:

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

O único lugar para o qual encontrei uma definição @breadcrumbs-separator__symbolé

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

onde é definido como falso

@breadcrumbs-separator__symbol: false;

Substituindo o @breadcrumbs-separator__symbolresultado em um símbolo estranho:

em vez do símbolo que eu escolhi.

Para tornar as coisas ainda mais confusas, no html gerado, vejo que o conteúdo do símbolo é '\ e608' e parece que ele vem do _icons.lessarquivo.

Alguém pode explicar o que está acontecendo aqui e como proceder para alterá-lo?

Qualquer ajuda é apreciada!

Explicações sobre ícones

A variável que você encontrou é meio enganosa. @breadcrumbs-separator__symbolParece que é o símbolo, mas não é isso que o define.

A variável que você está procurando é:

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

O @icon-nexté definido em /lib/web/css/source/lib/variables/_icons.less:

@icon-next: '\e608';

O \e608é um unicode definido app/design/frontend/Magento/luma/web/fonts/Luma-Icons.svgpara gerar o glifo correspondente:

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

Esses arquivos SVG são gerados com o IcoMoon pela equipe Magento.

Portanto, esse sistema basicamente define uma fonte de ícone usada para gerar o ícone (semelhante ao FontAwesome, se você estiver familiarizado). Para luma, a fonte é definida pela @icons__font-namevariável em app/design/frontend/Magento/luma/web/css/source/_theme.less:

@icons__font-name: 'luma-icons';

Você pode encontrar um documento muito útil em /lib/web/css/docs/icons.html(abra-o em um navegador para que fique bem), o que explica tudo sobre os ícones em detalhes.

Agora, como mudar isso?

Acho que sua melhor aposta é criar sua própria fonte com base no SVG existente . Não sei se o IcoMoon suporta a edição de SVG existente, mas essa é a ideia.

Portanto, crie seu próprio arquivo SVG com seu novo ícone de trilha de navegação modificado e faça o upload para app/design/frontend/Vendor/Theme/web/fonts/my-font.svg.

Em seguida, edite app/design/frontend/Vendor/Theme/web/css/source/_theme.lesse altere a @icons__font-namevariável para:

@icons__font-name: 'my-font';

Para o bem dos futuros leitores: a solução acima não funcionou para mim.

Ele mudou a família de fontes para 'minha-fonte', mas o ícone mostrado ainda era o original (>) e não o que eu defini no meu 'minha-fonte.svg' como 'e608'.

Parece que a família de fontes não é o que determina qual arquivo .svg é usado.

Acabei estendendo _icons.less e substituindo o valor de @ icon-next, com um ícone existente no arquivo original.

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

Adicione o código abaixo _theme.lessdo seu tema ativo.

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

Esta não é a maneira 'certa' de fazer isso, mas é uma solução preguiçosa para o problema. Quando me deparei com este problema e precisava substituir >por /eu apenas fiz uma substituição de css.

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

Eu simplesmente adicionei @breadcrumbs-icon__font-content: '/';ao _theme.less para conseguir isso.