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.


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? Sep 22 '16 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
    Sep 22 '16 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! Sep 22 '16 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
    Sep 22 '16 at 19:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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