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