0

How can I change the color and hover color of an icon, for example "icon-cart"? I already have a custom theme.

I found this website which has a nice documentation, but I dont really understand it. The Site: http://magento2-demo.nexcess.net/pub/static/frontend/Magento/blank/en_US/css/docs/icons.html

Thanks for your help!

2

If you are using the icons mentioned in the link you posted, you cannot change the icon colour as it's part of a sprite sheet background-image.

You'd need to copy the spritesheet, or crop out the icon you need, colour it to suit, and then add it in to your theme.

Hope this helps.

  • This helps! Where can I find this image? Thanks alot! – Jack92 Sep 22 '16 at 14:02
  • The spritesheet in the link you posted seems to be located here: /pub/static/frontend/Magento/blank/en_US/images/blank-theme-icons.png So I would look in vendor/magento/module-frontend-blank/ for it. If you can't find it, right click on the icon on your page and inspect element. There you will find the url to the image, and you can download it from there. From there you will want to add it to your theme and update the css accordingly. Using a font icon would be better though, as answered by Anna, as you can change the colour through css. – Matt Harris Sep 23 '16 at 13:25
1

The icons are either a sprite (which is an image, static) or a font (dynamic). If you are using a font then you can change the colour with standard CSS selectors.

The library documentation is here, and here is some info on CSS.

CSS lets you define properties such as width and height of your elements, text colours, fonts, ...

  • If I use font, how could I change the color of a specific icon? For example "icon-cart"? Wouldnt i need to do that in LESS and not css? I have a "_theme.less" file that overrides the default theme. What would I need to put in there? thx :) – Jack92 Sep 22 '16 at 14:14
  • You will have to do it in LESS. Have alook at your theme file at <theme_dir>/web/css/source/_theme.less. You can add your new values there. Your documentation lists these variables. The official doc will help you, too. – Anna Sep 22 '16 at 15:24

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.