1

How can I replace the minicart icon when using a custom theme?

Improve this question

3 Answers 3

Reset to default
5

Try something like this in your .css:

.minicart-wrapper a.action.showcart::before {
    content: "*whatever content you want, for example Font Awesome*";
}

You can also use a background-image.

Here's how to include CSS in your theme: https://devdocs.magento.com/guides/v2.2/frontend-dev-guide/css-topics/css-themes.html

Improve this answer
3

It depends on your theme. If this is a standard theme(luma), then you need to change the styles in the .css file. For the selector .minicart-wrapper .action.showcart::before.

Improve this answer
2
  • where can I find those css class? please explain eleborately
    – SUBBULAKSHMI G
    May 29, 2018 at 4:50
  • please tell in which css file I need to change?
    – SUBBULAKSHMI G
    Sep 17, 2018 at 12:09
0

::First let me clear that you can't edit magento core themes directly from /app/design/magento!!!::

::If you want to change it your self then, you've to create your own one and make changes as required!!::

::Now let's go to the point!::

::first => Create custom.css file at /app/design/vendor/theme/Magento_Theme/web/css/::

::second => create default.xml file at /app/design/vendor/theme/Magento_Theme/layout/::

::Now put the file contents like below::

::CSS::

::

.minicart-wrapper .action.showcart:before{
    
    content:url('../images/minicart.jpg')!important;
    
    zoom:1.5%;
    }

::

::XML::

<head>
    <css src="Magento_Theme::css/custom.css"/>
</head>

//make sure to copy the default structure for xml file.

//I have not pasted that here because i am a noob to stackexchange!!

:::Last Step :::

move your new minicart image to the /app/design/vendor/theme/Magento_Theme/web/images/minicart.img extension

::Finally run below commands::

::Make sure to remove /pub/static/frontend::

::bin/magento setup:upgrade::

::bin/magento setup:di:compile::

::bin/magento setup:static-content:deploy -f::

::bin/magento indexer:reindex::

::bin/magento cache:flush::

::chmod -R 777 ../magento root directory name::

::Thank You::

Improve this answer

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.