[Resolved] How can I increase the shopping cart icon size?

[bluebit]

I only want to increase the shopping cart icon size without increasing size of the other menu items.

[Leo]

Hi there,

Try this CSS:

@media (min-width: 769px) {
    .main-navigation .main-nav ul li.wc-menu-item a {
        font-size: 20px;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know 🙂

[bluebit]

that increased the size of all the menu items, i just want the shopping cart icon size to be increased

[Leo]

No it doesn’t. The CSS is targeting the cart icon only with li.wc-menu-item.

[bluebit]

I replaced the generate shopping cart icon with a fa one this is the code:

add_filter( ‘generate_woocommerce_menu_cart_icon’, ‘tu_change_wc_menu_cart_icon’ );
function tu_change_wc_menu_cart_icon() {
return ‘<i class=”fa fa-shopping-cart” aria-hidden=”true”></i>’;
}

[Leo]

Yes I noticed that but it shouldn’t matter.

I’ve tested my code using browser inspect and it should work.

[bluebit]

ah i just figured it out, this css code here made it work

.fa{
font-size: 20px;
}

[Leo]

That will change all the FA icons to size 20px.

Not sure why you wouldn’t use my code. Haven’t seen it being added but your call.

It should do the same thing but targetting that item only.

[bluebit]

just changed it to this to make it only target the shopping cart

.fa.fa-shopping-cart{
font-size: 17.5px;
}

[Leo]

Sounds good 🙂

[Author]

Posts