How can I change the ticket icon on a Head Action menu item?

7of9

Hi,

How can I change the ticket icon on a Head Action menu item?
Note: I only want to change the icon of one of the menu items. The cart menu item and put a cart there, instead of the ticket.
Thank you in advance.

Ninja

7of9
Hi
Add this code in custom css block

.head-action .navbar-nav li a:before {
    background-image: url(../images/icon/icon-1.png);
    display: inline-block;
    margin-right: 1.25rem;
    content: "";
    height: 18px;
    width: 26px;
}

change the icon path with your icon and you can change the width height value as well with this code.

7of9

Correct me if I am wrong, but that code seems to change both button background image. I just want to change the image of the top buttom. Any ideas?

Ninja

7of9
Hi
We have only 1 button in the demo. Kindly share the URL of page.
as there no 2nd button used.

7of9

Ninja I just did. Please, it is very important not to publish the website, as it must not be indexed yet! Keep it off line. Thank you! 🙂

Ninja

7of9
Hi
if you want to apply it only for first item use this code

.head-action .navbar-nav li:first-child a:before {
    background-image: url(images/shopping-cart-32-white.png);
    display: inline-block;
    margin-right: 1.25rem;
    content: "";
    height: 32px;
    width: 32px;
}

7of9

Ninja I tried it and this is what I've got:
How can I place the cart icon to the left side, over the ticket?

7of9

7of9 I've got it! I needed to put a slash in front of the image path. Here is the code:

.head-action .navbar-nav li:first-child a:before {
    background-image: url(/images/shopping-cart-32-white.png);
    display: inline-block;
    margin-right: 1.25rem;
    content: "";
    height: 32px;
    width: 32px;
}

Thanks for all your help! 🙂