4

I am trying to change color of cart icon in header/minicart , as currently it's in grey shade

enter image description here

I tried changing via adding following css in my custom.css at \web\css\custom.css

.minicart-wrapper .action.showcart::before{
   color:#fe0404;
}

but some how it's not working

  • You just need to deploy and cache clean. If still output not display then check it in private browser – Rohan Hapani Oct 3 '17 at 11:51
  • 1
    your changes looks fine, just deploy the code and check – Piyush Oct 3 '17 at 11:53
  • 1
    try placing css in your extended module , so it will overwrite the module css. in your custom css it might not work because of the order of CSS, you can use important but this is not right practice – Manoj Deswal Oct 3 '17 at 11:54
  • how can I change in module css? do I have to extend each module for changing css of respective .... yes it works with important ...but I don't want to use that for each changes – user56319 Oct 3 '17 at 11:59
7

Adding your custom CSS/LESS or updating existing CSS/LESS use _extend.less .

This will load first so there will no issue of css order and you will not require using important

Create this at below location

app\design\frontend\vendor-name\theme-name\Magento_Theme\web\css\source\_extend.less

Place all your custom CSS and LESS in _extend.less . It's better to use LESS , so you can use variables or mixins for better management.

Run below commands after placing your CSS/LESS

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy

Keep your cache disabled.

0

Try this command

  • php bin/magento setup:static-content:deploy
  • php bin/magento cache:clean
  • still not working – user56319 Oct 3 '17 at 11:56
0

Very simple.

Open the file: app/design/frontend/[YOUR_VENDOR]/[YOUR_THEME]/web/css/source/_theme.less

Look for the variable @minicart-icons-color and set the color you want for the mini cart icon.

If the variable does not exist, just add it.

Example:

enter image description here

Now compile your theme!

 

Here is the minicart icon lib:

enter image description here

Your Answer

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