1

I have built a custom-theme that extended from luma. However, I can't change cart icon by _extends.less of the custom-theme. May I know is somewhere else to change cart icon?

app/design/frontend///web/css/source/_extends.less:

.minicart-wrapper {
margin-right: 10px;

.action.showcart::before, .action.showcart.active::before {
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    content: '\e613';
    color: @color-white;
    -moz-font-feature-settings: 'liga';
    -moz-osx-font-smoothing: grayscale;
    vertical-align: middle;
}}

1 Answer 1

0

You should name _extend.less instead of _extends.less

And you should put your file in Magento_Checkout folder, and split your customize code into smaller and specific files like the original module keep the code clear and better organized.

To do that, take the following steps:

Create app/design/frontend/YourThemeVendor/YourTheme/Magento_Checkout/web/css/source/_extend.less:

@import "_minicart_extend.less";

Create app/design/frontend/YourThemeVendor/YourTheme/Magento_Checkout/web/css/source/_minicart_extend.less:

//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .minicart-wrapper {
        margin-right: 10px;

        .action {
            &.showcart {
                &::before, &.active::before {
                    display: inline-block;
                    white-space: nowrap;
                    word-wrap: normal;
                    direction: ltr;
                    content: '\e613';
                    //color: @color-white;
                    -moz-font-feature-settings: 'liga';
                    -moz-osx-font-smoothing: grayscale;
                    vertical-align: middle;
                }
            }
        }
    }
}

In the above code, I've commented out the CSS rule for the color because the background is white by default which caused the minicart icon invisible, you can change it if your background color is different.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.