Thay đổi biểu tượng dấu tách bánh mì

Theo mặc định, mẩu bánh mì trông giống như: trang chủ> danh mục> sản phẩm.

Tôi muốn thay đổi biểu tượng lớn hơn (>). Mã tạo ra nó nằm trong

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

và trông như thế này:

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

Nơi duy nhất tôi tìm thấy một định nghĩa cho @breadcrumbs-separator__symbollà

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

nơi nó được định nghĩa là sai

@breadcrumbs-separator__symbol: false;

Ghi đè @breadcrumbs-separator__symbolkết quả trong một biểu tượng kỳ lạ:

thay vì biểu tượng tôi đã chọn.

Để làm cho mọi thứ trở nên khó hiểu hơn, trong html được tạo, tôi thấy nội dung của biểu tượng là '\ e608' và có vẻ như nó đến từ _icons.lesstệp.

Bất cứ ai có thể giải thích những gì đang xảy ra ở đây và làm thế nào để thay đổi nó?

Bất kỳ trợ giúp được đánh giá cao!

Giải thích về các biểu tượng

Các biến bạn tìm thấy là loại sai lệch. @breadcrumbs-separator__symbolNghe có vẻ như đó là biểu tượng nhưng đó không phải là định nghĩa của nó.

Biến bạn đang tìm là:

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

Các @icon-nextđược quy định tại /lib/web/css/source/lib/variables/_icons.less:

@icon-next: '\e608';

Đây \e608là một unicode được xác định app/design/frontend/Magento/luma/web/fonts/Luma-Icons.svgđể tạo glyph tương ứng:

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

Các tệp SVG đó được tạo bởi IcoMoon bởi nhóm Magento.

Vì vậy, hệ thống này về cơ bản xác định một phông chữ biểu tượng được sử dụng để tạo biểu tượng (tương tự như FontAwgie nếu bạn quen thuộc với nó). Đối với luma, phông chữ được xác định bởi @icons__font-namebiến dưới app/design/frontend/Magento/luma/web/css/source/_theme.less:

@icons__font-name: 'luma-icons';

Bạn có thể tìm thấy một tài liệu rất hữu ích bên dưới /lib/web/css/docs/icons.html(mở nó trong trình duyệt để nó trông ổn) giải thích mọi thứ về các biểu tượng một cách chi tiết.

Bây giờ, làm thế nào để thay đổi điều đó?

Tôi nghĩ rằng đặt cược tốt nhất của bạn là tạo phông chữ của riêng bạn dựa trên SVG hiện có . Tôi không chắc liệu IcoMoon có hỗ trợ chỉnh sửa SVG hiện tại hay không nhưng đó là ý tưởng.

Vì vậy, hãy tạo tệp SVG của riêng bạn với biểu tượng mẩu bánh mì được sửa đổi mới của bạn và tải nó lên app/design/frontend/Vendor/Theme/web/fonts/my-font.svg.

Sau đó chỉnh sửa app/design/frontend/Vendor/Theme/web/css/source/_theme.lessvà thay đổi @icons__font-namebiến thành:

@icons__font-name: 'my-font';

Vì lợi ích của độc giả trong tương lai: giải pháp trên không hiệu quả với tôi.

Nó đã thay đổi họ phông chữ thành 'my-font', nhưng biểu tượng được hiển thị vẫn là bản gốc (>) và không phải là những gì tôi đã định nghĩa trong 'my-font.svg' là 'e608'.

Có vẻ như họ phông chữ không phải là thứ quyết định tập tin .svg nào được sử dụng.

Cuối cùng tôi đã mở rộng _icons.less và ghi đè giá trị của @ icon-next, với một biểu tượng thoát trong tệp gốc.

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

Thêm mã dưới đây trong _theme.lesschủ đề hoạt động của bạn.

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

Đây không phải là cách 'đúng' để làm điều này, nhưng nó là một giải pháp lười biếng cho vấn đề. Khi tôi gặp vấn đề này và cần phải thay thế >bằng /tôi chỉ cần ghi đè css.

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

Tôi chỉ cần thêm @breadcrumbs-icon__font-content: '/';vào _theme.less để đạt được điều này.