I did now search for hours and couldnt find a way how to change the color AND hover color of icons using the "luma font icons" font.

Any idea?

Thanks a thousand.

1 Answer 1


The icons themselves live on the :before element on the page.

enter image description here

So to change the hover color of the search icon, use this code:

.block-search .label:hover:before {
    color: #333;
  • Can I add this CSS code to my "_theme.less" file in order to override the existing theme? Commented Sep 22, 2016 at 19:05
  • you can, but keep in mind what theme your are extending from. If you have _theme.less file in your theme, that will replace outright that file in the theme you extend from. I prefer to use the _extend.less file for this, as it is automatically picked up last in compilation and doesn't un-knowingly override any other file. /app/design/frontend/{{vendor_namespace}}/{{theme}}/web/css/source/_extend.less
    – circlesix
    Commented Sep 22, 2016 at 19:09
  • But CSS Code in ".less" files doesnt work for me.. Any idea? Do I need to convert the CSS code to Less first? How? thanks! Commented Sep 22, 2016 at 19:15
  • Glad to help! css and less are basically the same syntax, less (and sass for that matter) just have some extra features that make writing css more dynamic. but all legal css will work on all .less files. But to be sure, less compilation in M2 is more complex so you can often have the right code, but it's not compiling correctly.
    – circlesix
    Commented Sep 22, 2016 at 19:55

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.