Changing breadcrumbs separator symbol

Question

By default the breadcrumbs look like: homepage > category > product.

I would like to change the greater than (>) symbol. The code that generates it is in

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

and looks like this:

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

The only place I found a definition for @breadcrumbs-separator__symbol is in

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

where it is defined as false

@breadcrumbs-separator__symbol: false;

Overriding the @breadcrumbs-separator__symbol resulted in a weird symbol:

instead of the symbol I chose.

To make things even more confusing, in the generated html, I see the content of the symbol is '\e608' and it looks like it comes from _icons.less file.

Can anyone explain what's going on here and how to go about changing it?

Any help is appreciated!

Answer 1

Explanations regarding icons

The variable you found is kind of misleading. @breadcrumbs-separator__symbol sounds like it's the symbol but that's not what defines it.

The variable you're looking is:

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

The @icon-next is defined in /lib/web/css/source/lib/variables/_icons.less :

@icon-next: '\e608';

The \e608 is a unicode defined in app/design/frontend/Magento/luma/web/fonts/Luma-Icons.svg to generate the corresponding glyph :

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

Those SVG files are generated with IcoMoon by the Magento team.

So this system basically defines an icon font that is used to generate the icon (similar to FontAwesome if you're familiar with it). For luma, the font is defined by the @icons__font-name variable under app/design/frontend/Magento/luma/web/css/source/_theme.less :

@icons__font-name: 'luma-icons';

You can find a very useful doc under /lib/web/css/docs/icons.html (open it in a browser so it looks good) which explains everything about icons in details.

Now, how to change that ?

I reckon your best bet is to create your own font based on the existing SVG. I'm not sure if IcoMoon supports editing of existing SVG but that's the idea.

So create your own SVG file with your new modified breadcrumbs icon and upload it to app/design/frontend/Vendor/Theme/web/fonts/my-font.svg.

Then edit app/design/frontend/Vendor/Theme/web/css/source/_theme.less and change the @icons__font-name variable to:

@icons__font-name: 'my-font';

Answer 2

For the sake of future readers: the above solution did not work for me.

It did change the font-family to 'my-font', but the icon that was shown was still the original (>) and not what I defined in my 'my-font.svg' as 'e608'.

Seems like the font-family is not what determines which .svg file is used.

I ended up extending _icons.less and overriding the value of @icon-next, with an exiting icon in the original file.

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

Answer 3

Add below code in _theme.less of your active theme.

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

Answer 4

This is not the 'right' way to do this, but it is a lazy solution to the problem. When I ran into this problem and needed to replace > with / i just did a css override.

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

Answer 5

I simply added @breadcrumbs-icon__font-content: '/'; to _theme.less to achieve this.