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!

Improve this question

2 Answers 2

Reset to default
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.

Improve this answer
2
  • This helps! Where can I find this image? Thanks alot!
    – Jack92
    Sep 22, 2016 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, 2016 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, ...

Improve this answer
2
  • 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, 2016 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, 2016 at 15:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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