Magento2 CSS – Small Icons Suddenly in a Customized Luma Theme

cssluma-thememagento2

I've just noticed many of the icons have suddenly shrunk (in one case changed from a star to an arrow) within my theme. I have compared the CSS for this with another instance where everything was supposed to be identical other than a few colour changes.

CSS with Issues:

.minicart-wrapper .action.showcart:before {
 -webkit-font-smoothing: antialiased;
    font-size: 22px;
    line-height: 28px;
    color: #8f8f8f;
    content: '\e611';
    font-family: 'icons-blank-theme';
    margin: 0;
    vertical-align: top;
    display: inline-block;
    font-weight: normal;
    overflow: hidden;
    speak: none;
    text-align: center;
}

CSS that seems fine:

.minicart-wrapper .action.showcart:before {
    -webkit-font-smoothing: antialiased;
    font-size: 22px;
    line-height: 28px;
    color: #8f8f8f;
    content: '\e611';
    font-family: 'luma-icons';
    margin: 0;
    vertical-align: top;
    display: inline-block;
    font-weight: normal;
    overflow: hidden;
    speak: none;
    text-align: center;
}

The only changes I can notice is the font-family suddenly changing to icons-blank-theme from luma-icons both themes are based on the default Magento 2 luma theme however and changing the font-family back just breaks the icons turning them into squares. A'm unsure how this has changed or the best way to revert seen as this is across countless icons.

Does anyone know what could have caused this and the best way to fix it?

Best Answer

My guess is that you're overriding some of luma's less files which is causing the problem. Try using the _extend.less file to add css rules without overriding the base files.

This article explains how icons work in magento: https://www.classyllama.com/blog/icon-fonts-magento-2-foundation

Related Topic