Small Icons suddenly in a Customised Luma theme

Question

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?

Answer 1

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

Answer 2

When you're extending a theme and overriding _theme.less you need to copy the variables from the original _theme.less. In this case you need to have the variables: @icons__font-path: '@{baseDir}fonts/Luma-Icons'; and @icons__font-name: 'luma-icons';

This is something you can find in the css guide from Magento: https://devdocs.magento.com/guides/v2.2/frontend-dev-guide/css-guide/css_quick_guide_approach.html

Answer 3

Seems to me that the icon size is right but they have some empty space in the paths inside the icon font.